/* ============================================================
   Единый файл правок главной страницы (перенос 20.10.2026).

   Раньше это были 22 отдельных <style>-блока внутри index.html: 60,9 КБ,
   половина веса страницы, и почти 1200 !important. Любая новая правка
   добавляла ещё один слой, и предсказать итоговый цвет становилось всё
   труднее. Содержимое перенесено байт в байт, порядок блоков сохранён —
   внешний вид не менялся. Порядок важен: файл подключается на том же месте,
   до brand-home.css, как и прежние блоки.

   Правило на будущее: сюда — только точечные правки главной. Новые
   глобальные стили — в style.css, а не сюда.
   ============================================================ */

/* ---------- petheart-master-2026 ---------- */
/* ============================================================
   PETHEART WORLD-CLASS MASTER DESIGN SYSTEM
   ============================================================ */

:root {
  --ink: #1E120D !important;
  --ink-2: #48342C !important;
  --muted: #735D53 !important;
  
  --brand: #E3124C !important;
  --brand-gradient: linear-gradient(135deg, #E6513A 0%, #C43B28 100%) !important;
  --brand-hover: linear-gradient(135deg, #EF5B45 0%, #B83422 100%) !important;
  --brand-shadow: 0 6px 20px rgba(227, 18, 76, 0.28) !important;
  
  --bg: #F7F1E8 !important;
  --bg-card: #FFFFFF !important;
  --bg-soft: #FAF4EC !important;
  
  --border-card: rgba(160, 120, 95, 0.16) !important;
  --border-hover: rgba(227, 18, 76, 0.38) !important;
  
  --shadow-card: 0 10px 28px rgba(45, 25, 18, 0.05), 0 2px 6px rgba(45, 25, 18, 0.02) !important;
  --shadow-hover: 0 18px 44px rgba(227, 18, 76, 0.13), 0 4px 12px rgba(45, 25, 18, 0.04) !important;

  --radius-card: 20px !important;
  --radius-btn: 12px !important;
  --radius-pill: 9999px !important;

  --ff: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --ff-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* 1. ГЛОБАЛЬНЫЙ ФОН И ТИПОГРАФИКА */
html {
  background-color: var(--bg) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body {
  color: var(--ink) !important;
  background-color: var(--bg) !important;
  background-image: url('/assets/img/paw-pattern-luxury.svg?v=1792335228') !important;
  background-repeat: repeat !important;
  background-size: 180px 180px !important;
  background-attachment: fixed !important;
  font-family: var(--ff) !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

h1, h2, h3, h4, .h-xl, .h-l, .h-m, .h-s {
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.16 !important;
}

/* 2. ШАПКА САЙТА (HEADER) */
#site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-card) !important;
  box-shadow: 0 4px 20px rgba(45, 25, 18, 0.03) !important;
  width: 100% !important;
}

.topbar {
  background: #20120D !important;
  color: rgba(255, 255, 255, 0.88) !important;
  min-height: 36px !important;
  font-size: 12.5px !important;
}

.alert-bar {
  background: #FFF1E8 !important;
  border-bottom: 1px solid #F1D8CC !important;
  color: #723A2F !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
}

.header__inner {

  justify-content: space-between !important;
}

.header .logo small {

  font-weight: 700 !important;

}

.nav {
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.nav a, .nav__more-btn {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #4A3329 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.nav a:hover, .nav__more-btn:hover {
  color: var(--brand) !important;
  background: rgba(227, 18, 76, 0.08) !important;
}

.header__lost-main {

  transition: transform 0.2s ease, box-shadow 0.2s ease !important;

}

/* 3. ПЕРВЫЙ ЭКРАН (HERO) */
.hero {
  background: transparent !important;

}

.hero__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(440px, 0.95fr) !important;

  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.hero__intro {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.hero__intro :is(h1,h2) {

  font-weight: 850 !important;

  color: #1A0F0B !important;

}

.hero__intro :is(h1,h2) mark {
  color: var(--brand) !important;
  background: transparent !important;
}

.hero__intro .lead {

  font-weight: 500 !important;

}

.hero__actions {

  margin-bottom: 24px !important;
}

.hero__actions .btn--primary {

  font-size: 15px !important;

}

.hero__actions .btn--ghost {

  font-size: 15px !important;

}

.hero-action-map {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  color: var(--brand) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  margin-left: 4px !important;
  width: auto !important;
}

.hero-action-map:hover {
  text-decoration: underline !important;
  background: transparent !important;
}

.mp-search__row {

  grid-template-columns: minmax(0, 1fr) auto auto !important;

}

.mp-search__row input {
  display: block !important;

  outline: none !important;

}

.mp-search__row input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(227, 18, 76, 0.12) !important;
}

.mp-search__row input::placeholder {
  color: #927D72 !important;
  font-weight: 500 !important;
}

.mp-search__row select {
  display: block !important;

  cursor: pointer !important;

}

.mp-search__row button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;

}

.mp-search__row button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(227, 18, 76, 0.4) !important;
}

.mp-search__quick {
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.mp-search__quick a {
  padding: 6px 14px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(160, 120, 95, 0.2) !important;
  background: var(--bg-card) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #523D34 !important;
  transition: all 0.2s ease !important;
}

.mp-search__quick a:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: #FFF4EE !important;
  transform: translateY(-1px) !important;
}

.hero-stories {
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--border-card) !important;
  width: 100% !important;
  aspect-ratio: 16 / 9.2 !important;
}

.hero-app-banner {
  display: block !important;
  width: 100% !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--bg-card) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.hero-app-banner:hover {
  transform: translateY(-3px) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-hover) !important;
}

.hero-app-banner picture,
.hero-app-banner img {
  border-radius: var(--radius-card) !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1241 / 848 !important;
  object-fit: cover !important;
}

/* 5. КАРТОЧКИ КАТЕГОРИЙ И ОБЪЯВЛЕНИЙ */
.quick__item,
.pet-card,
.urgent-card,
.shelter-card,
.vet-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.quick__item:hover,
.pet-card:hover,
.urgent-card:hover,
.shelter-card:hover,
.vet-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-hover) !important;
}

.quick--after-urgent {
  max-width: 1320px !important;
  margin: 40px auto !important;
  padding: 0 24px !important;
}

.quick--after-urgent .quick__grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 18px !important;
}

.pets-grid--tiles {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

/* 6. КНОПКИ */
.btn--primary {
  background: var(--brand-gradient) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: var(--brand-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border: none !important;
}

.btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(227, 18, 76, 0.4) !important;
}

.btn--ghost {
  background: var(--bg-card) !important;
  border: 1px solid rgba(160, 120, 95, 0.24) !important;
  color: #48352D !important;
  font-weight: 700 !important;
  border-radius: var(--radius-btn) !important;
  transition: all 0.2s ease !important;
}

.btn--ghost:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: #FFF4EE !important;
}

/* 7. СЕКЦИИ И ПОДВАЛ */
.section {
  padding: 52px 0 !important;
}

.section-head {
  margin-bottom: 28px !important;
}

.footer {
  background: #1C100B !important;

  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 60px 0 32px !important;
}

/* ---------- petheart-overrides-v2 ---------- */
/* ===== HEADER: строгая флекс-раскладка без наложений ===== */
.header {
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(160, 120, 95, 0.16) !important;
  box-shadow: 0 6px 24px rgba(45, 25, 18, 0.04) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.header::after { display: none !important; }

.header__inner {
  height: 76px !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.header .logo {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  gap: 10px !important;
}
.header .logo__img {
  width: 42px !important; height: 42px !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  flex: none !important;
}
.header .logo span { font-size: 18px !important; font-weight: 800 !important; color: #1E120D !important; }
.header .logo small { font-size: 9px !important; letter-spacing: .12em !important; color: #8C7367 !important; }

.header .nav {
  flex: 1 1 auto;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header .nav a,
.header .nav__more-btn {
  white-space: nowrap !important;
  padding: 9px 13px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #4A3329 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 0 !important;
  letter-spacing: -.005em !important;
  flex: none !important;
}
.header .nav a:hover,
.header .nav__more-btn:hover {
  color: #E3124C !important;
  background: rgba(227, 18, 76, 0.07) !important;
}
.header .nav a.is-active {
  color: #E3124C !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.header .nav a.is-active::after {
  background: #E3124C !important;
  left: 13px !important; right: 13px !important; bottom: 0 !important; height: 2px !important;
}

.header__lost-main {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #E6513A 0%, #C43B28 100%) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(227, 18, 76, 0.26) !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.header__lost-main:hover {
  background: linear-gradient(135deg, #EF5B45 0%, #B83422 100%) !important;
  box-shadow: 0 8px 22px rgba(227, 18, 76, 0.34) !important;
  transform: translateY(-1px) !important;
}

.header__cta {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
}

/* ===== ПОИСК: надёжный flex, поле ввода больше не сжимается ===== */
.mp-search {

  box-sizing: border-box !important;
}
.mp-search__row input {

  max-width: none !important;
}

/* ---------- petheart-overrides-v3 ---------- */
/* ===== HERO ACTIONS: компактные кнопки в одну строку ===== */
.hero__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  max-width: none !important;
}
.hero__actions .btn,
.hero__actions .btn--lg {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  min-height: 50px !important;
  height: 50px !important;
  border-radius: 13px !important;
  font-size: 14.5px !important;
}
.hero__actions .btn--primary {
  padding: 0 24px !important;
  font-weight: 800 !important;
}
.hero__actions .btn--ghost {
  padding: 0 22px !important;
  font-weight: 700 !important;
}
.hero__actions .hero-action-map {

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-weight: 700 !important;
}
.hero__actions .hero-action-map:hover {
  background: transparent !important;
  text-decoration: underline !important;
  transform: none !important;
}
.hero__actions::after { display: none !important; }

/* ===== RIGHT COLUMN: убираем белую подложку и узкую колонку баннера ===== */
.hero__community {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  width: 100% !important;
}

.hero__community .hero__media {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

.hero__community .hero__rail,
.hero__community .hero__rail.hero__rail--banner {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.hero__community .hero-app-banner {

  max-width: none !important;

}
.hero__community .hero-app-banner picture,
.hero__community .hero-app-banner img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1241 / 848 !important;
  object-fit: cover !important;
  border-radius: 20px !important;
}

/* Карточка новости */
.hero__community .hero__photo,
.hero__community .hero-stories {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(160, 120, 95, 0.16) !important;
  box-shadow: 0 10px 28px rgba(45, 25, 18, 0.05), 0 2px 6px rgba(45, 25, 18, 0.02) !important;
  width: 100% !important;
}

/* ===== ПОИСК ===== */
.mp-search {
  max-width: none !important;
  width: 100% !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(160, 120, 95, 0.16) !important;
  box-shadow: 0 10px 28px rgba(45, 25, 18, 0.05), 0 2px 6px rgba(45, 25, 18, 0.02) !important;
  margin: 0 !important;
}
.mp-search__row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.mp-search__row input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 50px !important;
  border-radius: 13px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  background: #FFFDFB !important;
  border: 1px solid rgba(160, 120, 95, 0.22) !important;
  color: #1E120D !important;
  box-sizing: border-box !important;
}
.mp-search__row select {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 156px !important;
  height: 50px !important;
  border-radius: 13px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  background: #FFFDFB !important;
  border: 1px solid rgba(160, 120, 95, 0.22) !important;
  color: #48352D !important;
  box-sizing: border-box !important;
}
.mp-search__row button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 108px !important;
  height: 50px !important;
  border-radius: 13px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 0 24px !important;
  background: linear-gradient(135deg, #E6513A 0%, #C43B28 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(227, 18, 76, 0.26) !important;
  box-sizing: border-box !important;
}
.hero__grid { gap: 44px !important; align-items: start !important; }

/* ---------- petheart-overrides-v6 ---------- */
/* Правый рейл: ровно по высоте содержимого, без пустых зон */
.hero__community .hero__rail--banner {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Баннер приложения: естественные пропорции, без aspect-ratio и трансформов */
.hero__community .hero-app-banner {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(45, 25, 18, 0.07) !important;
  transform: none !important;
  transition: none !important;
}
.hero__community .hero-app-banner:hover { transform: none !important; }

.hero__community .hero-app-banner picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  line-height: 0 !important;
}

.hero__community .hero-app-banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: fill !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* ---------- petheart-overrides-v7 ---------- */
/* 1) Рейл: снимаем aspect-ratio 49/52, из-за которого было 590px вместо 380px */
.hero__community .hero__rail,
.hero__community .hero__rail--banner {
  aspect-ratio: auto !important;
  grid-template-rows: none !important;
  align-content: normal !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

/* 2) Новости: читаемая подложка и аккуратный заголовок */
.hero-stories__shade,
.hero__community .hero-stories__shade {
  background: linear-gradient(180deg,
    rgba(22, 15, 12, 0.02) 0%,
    rgba(22, 15, 12, 0.30) 46%,
    rgba(22, 15, 12, 0.72) 78%,
    rgba(22, 15, 12, 0.88) 100%) !important;
}

.hero-stories__eyebrow {

  opacity: .92 !important;
}

.hero-stories__content p,
.hero-stories__meta {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
}
.hero-stories__slide.is-active .hero-stories__content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------- petheart-overrides-v8 ---------- */
/* Смена слайдов без наложения кадров: никакого кроссфейда текста */
.hero-stories__slide {
  transition: none !important;
  transform: none !important;
}
.hero-stories__slide.is-active { transform: none !important; }
.hero-stories__slide:not(.is-active) {
  opacity: 0 !important;
  visibility: hidden !important;
}
.hero-stories__slide:not(.is-active) .hero-stories__content {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

/* Затемнение под текстом: гарантированный контраст на любом фото */
.hero-stories__shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg,
      rgba(20, 13, 10, 0.06) 0%,
      rgba(20, 13, 10, 0.38) 42%,
      rgba(20, 13, 10, 0.80) 72%,
      rgba(20, 13, 10, 0.94) 100%) !important;
}

/* Блок текста поверх затемнения */
.hero-stories__content {
  z-index: 2 !important;
  left: 26px !important;
  right: 26px !important;
  bottom: 74px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
}

.hero-stories__eyebrow {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
}

.hero-stories__content h2 {
  margin: 0 !important;
  font-size: 29px !important;
  line-height: 1.13 !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.hero-stories__content p,
.hero-stories__meta,
.hero-stories__date {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ---------- petheart-overrides-v9 ---------- */
/* ===== Стабильная отрисовка hero-изображений ===== */
.hero-stories { isolation: auto !important; }
.hero__community .hero-stories__slide > img,
.hero__community .hero-app-banner img {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

/* ===== Премиальный воздух первого экрана ===== */
.hero {
  position: relative !important;
  padding: 40px 0 64px !important;
  overflow: visible !important;
}
.hero::before {
  content: "" !important;
  position: absolute !important;
  top: -180px !important;
  left: -160px !important;
  width: 900px !important;
  height: 720px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(circle at 40% 45%,
    rgba(227, 18, 76, 0.085) 0%,
    rgba(227, 18, 76, 0.035) 42%,
    rgba(227, 18, 76, 0) 72%) !important;
}
.hero > .container { position: relative !important; z-index: 1 !important; }

/* Типографика левой колонки */
.hero__intro :is(h1,h2) {
  font-size: clamp(40px, 3.4vw, 56px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  margin: 10px 0 18px 0 !important;
}
.hero__intro .lead {
  max-width: 500px !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  color: #57423A !important;
  margin: 0 0 24px 0 !important;
}

/* Кнопки и ссылка */
.hero__actions {
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
}
.hero__actions .btn--primary,
.hero__actions .btn--ghost {
  min-height: 50px !important;
  height: 50px !important;
  border-radius: 13px !important;
}
.hero__actions .hero-action-map {
  margin: 0 !important;
  padding: 0 !important;
  height: 26px !important;
  min-height: 0 !important;
  flex: 1 0 100% !important;
  justify-content: flex-start !important;
  font-size: 14px !important;
  color: #C0432F !important;
}

/* Поиск и доверие */
.mp-search { margin-top: 20px !important; }
.hero__trust { margin-top: 24px !important; }

/* ===== Единые тени карточек правой колонки ===== */
.hero__community .hero__photo,
.hero__community .hero-app-banner {
  box-shadow: 0 14px 36px rgba(45, 25, 18, 0.09), 0 3px 8px rgba(45, 25, 18, 0.03) !important;
  border: 1px solid rgba(160, 120, 95, 0.15) !important;
}

/* ---------- petheart-overrides-v10 ---------- */
/* Читаемость служебных строк в карточке новости */
.hero-stories__content p,
.hero-stories__meta,
.hero-stories__date,
.hero-stories__content time {
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
}

/* «Читать новость» — аккуратная пилюля поверх фото */
.hero-stories__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 12px !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.hero-stories__link:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}
.hero-stories__link .ico { width: 14px !important; height: 14px !important; }

/* Точки пагинации — крупнее и заметнее */
.hero-stories__dots button { height: 6px !important; background: rgba(255,255,255,.5) !important; }
.hero-stories__dots button.is-active { width: 22px !important; background: #FFFFFF !important; }

/* ---------- petheart-typography-2026 ---------- */
/* ============================================================
   ТИПОГРАФИЧЕСКАЯ ЧИТАЕМОСТЬ
   ============================================================ */

/* Надзаголовки: крупнее и плотнее */
.eyebrow {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.085em !important;
}

/* Мелкие заголовки-лейблы */
h3.h-s { font-size: 15px !important; line-height: 1.3 !important; }
h4 { font-size: 14px !important; line-height: 1.35 !important; }

/* Служебный текст: минимальный кегль 12.5px */
.community-rating__note,
.community-rating__count,
.community-review-form-card__lead,
.site-review-form__privacy,
.site-review-rating__hint,
.site-review-field__counter,
.hero-stories__content p,
.hero-stories__meta,
.community-review-card__text time,
time,
figcaption,
small {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* Подписи полей формы отзыва */
legend,
.site-review-field > span,
.community-review-form-card label > span,
.site-review-form label > span {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Тёплый тёмный цвет вместо серо-голубого */
.muted,
.community-rating__note,
.community-rating__count,
.site-review-rating__hint,
.site-review-field__counter {
  color: #6B5348 !important;
}
.community-review-form-card__lead,
.site-review-form__privacy,
.reviews-section__intro {
  color: #57423A !important;
  font-weight: 500 !important;
}

/* Основной текст — чуть плотнее для экранов */
.lead { font-weight: 500 !important; }
p { text-wrap: pretty; }

/* Подвал: гарантированно светлый текст на тёмном */
.footer { color: #E6D8CF !important; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer strong { color: #FFFFFF !important; }
.footer p, .footer li, .footer a, .footer span, .footer time, .footer div { color: #DCCEC5 !important; }
.footer a:hover { color: #FFFFFF !important; }
.footer small { color: #B49E93 !important; font-size: 11.5px !important; }

/* ---------- petheart-typography-v12 ---------- */
/* Ни один текст на сайте не мельче 10.5px; служебный — 12px */
.alert-bar__kicker { font-size: 12px !important; }

.logo small,
.header .logo small { font-size: 10.5px !important; letter-spacing: .08em !important; }

.icon-btn__label { font-size: 10.5px !important; letter-spacing: .01em !important; }

.review-card__label,
.review-card__result-label,
.community-review-card__topic,
.review-card__meta {
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .015em !important;
}

.ms-restore__hint,
.ms-head__sub,
.ms-clear,
.misha-intro__note,
.ms-disclaimer {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* Подписи форм и легенды — тёмные, читаемые */
legend,
fieldset > legend {
  color: #5E473D !important;
  font-weight: 700 !important;
}

/* Сноска под CTA в тёмной полосе */
.petbot-callout__note,
.petbot-callout .muted {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

/* Рейтинговые подписи — плотнее по цвету */
.community-rating__note,
.community-rating__count,
.site-review-rating__hint,
.site-review-field__counter {
  color: #614A40 !important;
}

/* ---------- petheart-typography-v13 ---------- */
/* Легенды форм — тёмные и крупные (перебиваем app-install.css по специфичности) */
html body #main .site-review-rating legend,
html body #main .site-review-form legend,
html body #main .site-review-field legend,
html body #main .community-review-form-card legend,
#community-reviews .site-review-rating legend,
.site-review-rating legend {
  color: #5E473D !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

/* Подписи иконок в шапке */
html body .header .header__cta .icon-btn__label,
html body .header .icon-btn__label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #6B5348 !important;
  letter-spacing: .01em !important;
}

/* Подпись под логотипом */
html body .footer small,
html body .footer .logo small {
  font-size: 11.5px !important;
  color: #BDA79C !important;
  letter-spacing: .06em !important;
}

/* ---------- petheart-mobile-repair ---------- */
/* ================= МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ ================= */
@media (max-width: 1080px) {
  .hero { padding: 24px 0 40px !important; }
  .hero::before { display: none !important; }

  .hero__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .hero__intro,
  .hero__community { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .hero__rail,
  .hero__rail--banner { width: 100% !important; max-width: 100% !important; }
  .hero-stories,
  .hero__photo { width: 100% !important; }
  .hero-app-banner,
  .hero-app-banner picture,
  .hero-app-banner img { width: 100% !important; max-width: 100% !important; height: auto !important; }

  .hero__intro :is(h1,h2) { font-size: clamp(30px, 8.2vw, 42px) !important; line-height: 1.08 !important; }
  .hero__intro .lead { max-width: 100% !important; }

  .hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero__actions .btn,
  .hero__actions .btn--lg { width: 100% !important; justify-content: center !important; }
  .hero__actions .hero-action-map { flex: 0 0 auto !important; justify-content: flex-start !important; }

  .mp-search { max-width: 100% !important; width: 100% !important; padding: 14px !important; }
  .mp-search__row { flex-wrap: wrap !important; gap: 8px !important; }
  .mp-search__row input { flex: 1 1 100% !important; width: 100% !important; }
  .mp-search__row select { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; width: auto !important; }
  .mp-search__row button { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; width: auto !important; }

  .quick--after-urgent { margin: 28px auto !important; padding: 0 16px !important; }
}

/* Сетки объявлений и отзывов: жёсткий сброс на узких экранах */
@media (max-width: 1080px) {
  html body .reviews-grid,
  html body .grid-3.reviews-grid {

    gap: 16px !important;
  }
  html body .review-card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Шапка на телефоне */
@media (max-width: 860px) {
  .header__inner {
    height: auto !important;
    min-height: 60px !important;
    gap: 6px !important;
    padding: 0 12px !important;
  }
  .header .logo {

    gap: 8px !important;
  }
  .header .logo small { display: none !important; }
  .header .header__cta { margin-left: auto !important; gap: 6px !important; }
}

@media (max-width: 600px) {
  .hero__intro :is(h1,h2) { font-size: clamp(27px, 8.8vw, 36px) !important; }
  .mp-search__row select,
  .mp-search__row button { flex: 1 1 100% !important; }
}

/* ---------- petheart-mobile-repair-2 ---------- */
@media (max-width: 1080px) {
  html body .pets-grid.pets-grid--tiles,
  html body .pets-grid--tiles {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  html body .pets-grid.pets-grid--tiles > .pet-card,
  html body .pets-grid--tiles > .pet-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .quick--after-urgent .quick__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
  }
  .quick--after-urgent .quick__grid > * {
    width: auto !important;

  }

  html body .reviews-grid,
  html body .grid-3.reviews-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }
}

@media (max-width: 600px) {
  html body .pets-grid.pets-grid--tiles,
  html body .pets-grid--tiles { grid-template-columns: minmax(0, 1fr) !important; }
  .quick--after-urgent .quick__grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- petheart-mobile-repair-3 ---------- */
/* Ряд объявлений: работает и как flex, и как grid */
@media (max-width: 1080px) {
  html body #main .pets-grid.pets-grid--tiles,
  html body #main .pets-grid--tiles,
  html body .pets-grid.pets-grid--tiles {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  html body #main .pets-grid--tiles > .pet-card,
  html body .pets-grid--tiles > .pet-card {
    flex: 0 0 calc(50% - 7px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(50% - 7px) !important;
    margin: 0 !important;
  }

  /* Категории */
  .quick--after-urgent .quick__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .quick--after-urgent .quick__grid > * {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }

  /* Отзывы */
  html body .reviews-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  html body .reviews-grid > .review-card {
    flex: 1 1 100% !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  html body .pets-grid--tiles > .pet-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .quick--after-urgent .quick__grid > * { flex: 1 1 100% !important; }
}

/* Шапка: оставляем логотип и бургер, убираем лишние контролы */
@media (max-width: 860px) {
  .header__lost-main { display: none !important; }
  .header .header__cta .icon-btn { display: none !important; }
  .header .header__cta .btn--primary { display: none !important; }
  .header .header__cta .ya-btn { display: none !important; }
  .header .header__cta .burger { display: flex !important; }
  .header .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
  }
  .header .logo__img { flex: 0 0 auto !important; }
  .header .logo span {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ---------- petheart-mobile-repair-4 ---------- */
/* ============ МОБИЛЬНОЕ МЕНЮ: НЕПРОЗРАЧНАЯ ПАНЕЛЬ ============ */
@media (max-width: 860px) {
  html body .nav,
  html body #nav,
  html body #header-bar .nav {
    display: none;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #0F0E13 !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.65) !important;
    padding: 12px 14px 28px !important;
    margin: 0 !important;
    gap: 2px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    z-index: 1300 !important;
  }
  html body .nav.is-open,
  html body #nav.is-open,
  html body #header-bar .nav.is-open {
    display: flex !important;
  }

  html body .nav a,
  html body #nav a {
    color: #F3E9E2 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 13px 14px !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  html body .nav a:hover,
  html body #nav a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #FFFFFF !important;
  }
  html body .nav a.is-active,
  html body #nav a.is-active {
    background: rgba(227, 18, 76, 0.18) !important;
    color: #FFC9BC !important;
  }
  html body .nav a.is-active::after { display: none !important; }

  html body .nav__panel-head,
  html body #nav .nav__panel-head {
    background: #FFFCF8 !important;
    color: #1E120D !important;
    border-bottom: 1px solid #EFE4DD !important;
    padding: 10px 4px 14px !important;
    margin-bottom: 6px !important;
    font-weight: 800 !important;
    font-size: 17px !important;
  }

  html body .nav .nav__dropdown .nav__extra,
  html body .nav__extra {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #F3E9E2 !important;
  }

  /* Затемнение под меню */
  html body.is-nav-open::after {
    content: "" !important;
    position: fixed !important;
    inset: 64px 0 0 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 1290 !important;
    pointer-events: none !important;
  }

  /* ============ ШАПКА: ЛОГОТИП + ПРОФИЛЬ/ВХОД + БУРГЕР ============
     Раньше здесь стояло `#header-bar .header__cta > *:not(.burger){display:none}`:
     оно прятало и «Избранное»/«Сообщения» (это нужно), и блок профиля вместе
     с кнопкой входа (это было ошибкой — на главной нельзя было ни войти, ни
     увидеть свой аккаунт). Скрываем только плитки избранного и сообщений. */
  html body #header-bar .header__cta > .icon-btn { display: none !important; }
  html body #header-bar .header__cta {
    margin-left: auto !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }
  html body #header-bar .header__cta .burger { display: flex !important; }
  html body #header-bar .header__lost-main { display: none !important; }
  html body #header-bar .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    align-items: center !important;
    gap: 9px !important;
    overflow: hidden !important;
  }
  html body #header-bar .logo__img { flex: 0 0 auto !important; width: 38px !important; height: 38px !important; }
  html body #header-bar .logo span,
  html body #header-bar .logo b {
    font-size: 17px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body #header-bar .logo small {
    font-size: 9.5px !important;
    letter-spacing: .09em !important;
    white-space: nowrap !important;
  }
}

/* ---------- petheart-mobile-menu-panel ---------- */
@media (max-width: 860px) {
  /* Внутренняя панель меню — тёмная, без белых подложек */
  html body .nav__panel,
  html body #nav .nav__panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .nav__panel-head {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 4px 2px 12px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid #EFE4DD !important;
  }
  html body .nav__panel-title {
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }
  html body .nav__act {
    color: #F0E2DA !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Пункты меню */
  html body .nav__panel a,
  html body .nav a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #F3E9E2 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    padding: 12px 12px !important;
    border-radius: 11px !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
  }
  html body .nav__panel a:hover,
  html body .nav a:hover { background: rgba(255, 255, 255, 0.07) !important; }

  html body .nav__panel .ico,
  html body .nav .ico { color: #E4A08F !important; }

  html body .nav__note,
  html body .nav__foot,
  html body .nav__panel p {
    color: #B7A399 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  html body .nav__panel hr,
  html body .nav hr {
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 10px 0 !important;
  }
}

/* ---------- petheart-mobile-repair-5 ---------- */
@media (max-width: 860px) {
  /* 1. Меню: контрастный текст (перебиваем все вложенные правила сайта) */
  html body .nav.is-open a,
  html body .nav.is-open .nav__panel a,
  html body .nav.is-open .nav__panel .nav__link,
  html body #nav.is-open a,
  html body #nav.is-open .nav a,
  html body #header-bar .nav.is-open a {
    color: #F6EDE7 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    padding: 12px 12px !important;
    border-radius: 11px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  html body .nav.is-open a:active,
  html body .nav.is-open .nav__panel a:active { background: rgba(255, 255, 255, 0.1) !important; }

  html body .nav.is-open .nav__panel-title { color: #FFFFFF !important; }

  /* Убираем дублирующий список ссылок вне панели */
  html body .nav > *:not(.nav__panel) { display: none !important; }
  html body .nav { gap: 0 !important; }

  /* 2. Шапка: один бренд, только бургер из действий */
  html body .header .brand-m,
  html body #header-bar .brand-m { display: none !important; }

  html body .header .icon-btn,
  html body .header .header__lost-main,
  html body #header-bar .icon-btn,
  html body #header-bar .header__lost-main { display: none !important; }

  html body .header .ya-btn,
  html body #header-bar .ya-btn {
    display: flex !important;
    margin-left: 0 !important;
  }
  html body .header .ya-btn__text { display: none !important; }

  html body .header .burger,
  html body #header-bar .burger { display: flex !important; }

  html body .header__cta { margin-left: auto !important; gap: 0 !important; }
  html body .header__inner { padding-right: 14px !important; }

  html body .header .logo,
  html body #header-bar .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 9px !important;
  }
  html body .header .logo span {
    font-size: 17px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html body .header .logo small {
    font-size: 9px !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* 4. Плашка «Требуется внимание» не обрезается */
  .attention-pill,
  .urgent-pill,
  .hero__urgent {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* ---------- petheart-mobile-final ---------- */
/* ===== PETHEART MOBILE FINAL START ===== */
@media (max-width: 860px) {
  /* Брендинг: на телефоне .brand-m вместо десктопного .logo */
  html body #header-bar .logo { display: none !important; }
  html body #header-bar .brand-m {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    text-decoration: none !important;
    flex: 0 1 auto !important;
  }
  html body #header-bar .brand-m__mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 auto !important;
    border-radius: 11px !important;
  }
  html body #header-bar .brand-m__text { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
  html body #header-bar .brand-m__name {
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -.01em !important;
  }
  html body #header-bar .brand-m__name b { color: #FF6B52 !important; font-weight: 800 !important; }
  html body #header-bar .brand-m__sub {
    color: #B7A399 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.3 !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: #FFD9CC !important;
    background: rgba(227, 18, 76, 0.24) !important;
    font-weight: 700 !important;
  }

  /* Прямые (десктопные) ссылки внутри .nav не показываем, панель — по порядку */
  html body #header-bar nav.nav > a { display: none !important; }
  html body #header-bar nav.nav.is-open .nav__panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  html body #header-bar nav.nav.is-open .nav__panel-head { order: 1 !important; }
  html body #header-bar nav.nav.is-open .nav__panel-body { order: 2 !important; }
  html body #header-bar nav.nav.is-open .nav__panel-foot { order: 3 !important; }
  html body #header-bar nav.nav.is-open .nav__note { order: 4 !important; }

  /* Отступ под фиксированную нижнюю панель */
  html body { padding-bottom: 92px !important; }
}
/* ===== PETHEART MOBILE FINAL END ===== */

/* ---------- petheart-mobile-final2 ---------- */
/* ===== PETHEART MOBILE FINAL2 START ===== */
@media (max-width: 860px) {
  /* В открытом меню показываем только панель — убираем дубли ссылок сверху */
  html body #header-bar nav.nav.is-open > * { display: none !important; }
  html body #header-bar nav.nav.is-open > .nav__panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Заголовок первого экрана: возвращаем видимость */
  html body #main .hero__intro :is(h1,h2) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    clip: auto !important;
    white-space: normal !important;
    font-size: 27px !important;
    line-height: 1.16 !important;
    letter-spacing: -.022em !important;
    margin: 0 0 12px !important;
    color: #FFFFFF !important;
  }
  html body #main .hero__intro :is(h1,h2) mark { color: #FF7A5F !important; background: transparent !important; }

  html body #main .hero__intro .eyebrow {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    color: #FF9C82 !important;
    font-size: 11.5px !important;
  }
}
/* ===== PETHEART MOBILE FINAL2 END ===== */

/* ---------- header-tagline-fit ---------- */
@media (min-width: 861px) {
  .header .logo small,
  #header-bar .logo small {
    font-size: 9.5px !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
    color: #8C7367 !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
  }
}

/* ---------- header-tagline-desktop ---------- */
/* ===== HEADER TAGLINE (desktop) START ===== */
@media (min-width: 1081px) {
  .header .logo small,
  .header__inner .logo small,
  .header__inner.is-compact .logo small,
  .header__inner.is-compact2 .logo small,
  .header__inner.is-compact3 .logo small,
  .header__inner.is-compact4 .logo small {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #8C7367 !important;
    white-space: nowrap !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
  }
}
@media (min-width: 1081px) and (max-width: 1380px) {
  .header .logo small,
  .header__inner .logo small {
    font-size: 8.5px !important;
    letter-spacing: 0.035em !important;
  }
}
/* ===== HEADER TAGLINE (desktop) END ===== */

/* ---------- header-nav-gutter ---------- */
/* ===== HEADER NAV GUTTER START ===== */
@media (min-width: 1081px) and (max-width: 1380px) {
  .header .nav,
  .header__inner .nav { margin-right: 14px !important; }
  .header .nav a,
  .header .nav__more-btn { padding-left: 10px !important; padding-right: 10px !important; }
}
/* ===== HEADER NAV GUTTER END ===== */


/* ============================================================
   ФИРМЕННЫЙ СВЕТЛЫЙ ПОДВАЛ (СЕРДЦЕ ПИТОМЦА) — 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;
}


/* PHX: заголовок hero — единый цвет для h1 и h2.
   Мобильный hero использует h2 (на странице один h1), но визуально
   он должен оставаться ровно таким же, как прежний h1. */
html body #main .hero__intro :is(h1, h2) {
  color: #1A0F0B !important;
  -webkit-text-fill-color: #1A0F0B !important;
}