/*
 * «Тёплый минимализм»: финальный слой оформления публичного сайта.
 * Подключается после существующих стилей, не меняет разметку форм, API и права.
 * Области: палитра → навигация → первый экран → поиск → категории → объявления
 * → формы и страницы товара → нижние блоки → адаптивные уточнения.
 */

/* === Общая палитра: льняные поверхности, шалфейные акценты и тёплые границы. === */
:root {
  --ink: #2c3b2f;
  --muted: #697265;
  --green: #355b40;
  --lime: #e3e9d5;
  --cream: #f0ece4;
  --paper: #fcfaf6;
  --line: #e5e1d7;
  --orange: #a66b4b;
  --shadow: 0 12px 36px rgba(53, 61, 43, .07);
  --warm-surface: #fffefa;
  --warm-hover: #294a33;
}

/* Ширина страницы ограничивает длину строк, включая каталог и серверные карточки. */
body .shell {
  width: min(1180px, calc(100% - 64px));
}

/* === Шапка: спокойная непрозрачная подложка и компактные действия без изменения ID. === */
body .site-header {
  background: rgba(252, 250, 246, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}

body .topbar {
  min-height: 82px;
  height: auto;
  gap: 30px;
  padding-top: 16px;
  padding-bottom: 16px;
}

body .brand {
  font-size: 25px;
  letter-spacing: -1.2px;
}

body .brand-mark {
  background: transparent;
}

body .desktop-nav {
  gap: 22px;
}

body .desktop-nav a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

body .header-actions {
  gap: 14px;
  min-width: 0;
}

body .header-actions .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 40px;
  min-height: 40px;
  padding: 6px;
  font-size: 12px;
  font-weight: 500;
}

/* Иконки не перехватывают геометрию существующих счётчиков сообщений. */
body .header-actions .icon-button svg {
  flex: 0 0 20px;
}

body .header-actions .text-button {
  display: block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
}

body .primary,
body .primary.small {
  background: var(--green);
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
}

body .primary:hover {
  background: var(--warm-hover);
  transform: none;
}

body .primary.small {
  padding: 13px 18px;
  font-size: 12px;
}

body .secondary {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
  border-radius: 10px;
}

/* Видимый фокус возвращается также полям поиска с прежним outline:0. */
body :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* === Главный экран: текст и кресло в двух колонках, поиск в нормальном потоке. === */
body.home-page .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px 32px;
  min-height: 0;
  padding-top: 30px;
  padding-bottom: 0;
}

body.home-page .hero-copy {
  width: auto;
  padding: 20px 0;
}

/* Базовый размер подписей первого экрана: 16 px, на телефоне 15 px; подпись сервиса масштабируется отдельно. */
body.home-page {
  --home-section-label-size: 16px;
  /* Общий размер заголовков категорий, объявлений, безопасности и бесплатного размещения. */
  --home-section-title-size: 24px;
}

body.home-page .hero-copy .eyebrow {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: var(--home-section-label-size);
  font-weight: 600;
  letter-spacing: 1.8px;
}

/* Основной слоган уменьшен ещё на 10% во всех адаптивных размерах; межбуквенный интервал масштабируется пропорционально. */
body.home-page .hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(21.06px, 2.4705vw, 32.4px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -1.377px;
}

body.home-page .hero h1 em {
  color: inherit;
}

body.home-page .hero-copy p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* Подпись «Купибобра — доска объявлений по всей России» увеличена на 10% от базового размера, включая телефон. */
body.home-page .hero-service-label {
  display: block;
  margin-top: 15px;
  color: var(--muted);
  font-size: calc(var(--home-section-label-size) * 1.1);
  line-height: 1.6;
}

body.home-page .hero-art {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1.48;
  max-width: 520px;
  justify-self: center;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
}

/* Круг повторяет подложку выбранной концепции; векторное кресло масштабируется без потери чёткости. */
body.home-page .hero-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: auto;
  height: 88%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #eeeadf;
}

body.home-page .hero-chair {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Телевизор немного перекрывает правую часть кресла; корпус и белая подпись на экране находятся перед бобром. */
body.home-page .hero-vintage-tv {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 6%;
  display: block;
  width: 34%;
  height: auto;
  aspect-ratio: 22 / 17;
  object-fit: contain;
  transform: rotate(-5deg);
  pointer-events: none;
}

/* Голова бобра остаётся между креслом и растением и выглядывает из-за верхней кромки телевизора. */
body.home-page .hero-peek-beaver {
  position: absolute;
  z-index: 1;
  left: 63%;
  bottom: 29%;
  display: block;
  width: 14%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}

/* === Поиск главной и каталога: категория, запрос, город и кнопка без тяжёлой тени. === */
body.home-page .search-panel,
body.catalog-page .search-panel {
  position: relative;
  inset: auto;
  width: 100%;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, .48fr) auto;
  align-items: stretch;
  gap: 0;
  margin: 8px 0 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--warm-surface);
  box-shadow: 0 4px 14px rgba(53, 61, 43, .025);
}

body .search-panel .all-categories-trigger {
  gap: 8px;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}

body .search-panel .search-input {
  min-width: 0;
  padding: 0 18px;
}

body .search-panel input {
  min-width: 0;
  min-height: 48px;
  font-size: 14px;
  color: var(--ink);
}

body .search-panel input::placeholder {
  color: var(--muted);
  opacity: 1;
}

body .search-panel .location-input {
  display: flex;
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: 16px;
  padding-right: 10px;
}

body .search-panel .primary {
  min-width: 106px;
  padding: 12px 24px;
}

/* === Категории главной: все существующие разделы, компактные тёплые плитки. === */
body.home-page .categories {
  padding-top: 24px;
  padding-bottom: 34px;
}

body.home-page .categories .section-heading {
  align-items: center;
  margin-bottom: 14px;
}

body.home-page .categories .eyebrow {
  display: none;
}

/* Заголовок категорий равен по размеру заголовку последних объявлений. */
body.home-page .categories h2 {
  font-size: var(--home-section-title-size);
  font-weight: 600;
  letter-spacing: -.3px;
}

body.home-page .categories .link-button {
  padding: 6px 0 6px 12px;
  font-size: 12px;
  font-weight: 500;
}

body.home-page .category-grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

body.home-page .category-grid .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 16px 6px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--cream);
  text-align: center;
  transition: background-color .16s, border-color .16s;
}

body.home-page .category-grid .category:hover,
body.home-page .category-grid .category.active {
  transform: none;
  border-color: #9eae92;
  background: #e9e8dc;
  box-shadow: none;
}

body.home-page .category-grid .category strong {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

/* Все эскизы сохраняют соответствие серверным категориям; убраны тетрадь, скотч и наклон. */
body .category-sketch {
  background: transparent;
  background-image: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

body .category-sketch::after {
  display: none;
}

body .category-sketch img {
  transform: none;
}

body.home-page .category-grid .category-sketch {
  --sketch-size: 42px;
  --sketch-glyph: 38px;
  margin: 0;
}

/* === Выдача: тот же тёплый фон на главной, в каталоге и на страницах категорий. === */
body.home-page #catalog,
body.catalog-page #catalog {
  background: var(--paper);
  padding-top: 16px;
  padding-bottom: 42px;
}

body #catalog .catalog-heading {
  margin-bottom: 17px;
}

/* На главной размер связан с заголовками безопасности и размещения; отдельный каталог сохраняет свои 28 px. */
body #catalog .catalog-heading :is(h1, h2) {
  font-size: var(--home-section-title-size, 28px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -1px;
}

body #catalog .catalog-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Ссылка сохраняет переход в полноценный каталог, но не конкурирует с основным поиском. */
body.home-page .catalog-open-link {
  margin-bottom: 22px;
  padding: 8px 0;
  background: transparent;
  color: var(--green);
  font-size: 13px;
}

body #catalog[data-view="grid"] .listing-grid {
  gap: 28px 20px;
}

body #catalog[data-view="grid"] .listing-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body #catalog .listing-card:hover {
  transform: none;
  box-shadow: none;
}

body #catalog[data-view="grid"] .listing-image {
  aspect-ratio: 1.24;
  border-radius: 14px;
  background: var(--cream);
  overflow: hidden;
}

body #catalog .listing-image img {
  transition: none;
}

body #catalog .listing-card:hover img {
  transform: none;
}

body #catalog[data-view="grid"] .listing-info {
  display: flex;
  flex-direction: column;
  padding: 12px 0 0;
}

/* В плитке цена идёт перед названием; список и серверные ссылки сохраняют прежний DOM. */
body #catalog[data-view="grid"] .listing-info > .price {
  order: -1;
  margin-bottom: 5px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.5px;
}

body #catalog[data-view="grid"] .listing-info h3 {
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

body #catalog .listing-title-link {
  color: var(--ink);
}

body #catalog .meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

body #catalog .favorite {
  display: grid;
  place-items: center;
  right: 9px;
  top: 9px;
  width: 36px;
  height: 36px;
  background: rgba(255, 254, 250, .95);
}

body #catalog .badge {
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
}

body #catalog .fallback-image {
  background: #eeeae1;
}

body #catalog .load-more {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  padding: 14px 24px;
  font-size: 13px;
}

/* Каталог списком и фильтры: размеры контролов и правила видимости не меняются. */
body.catalog-page .hero {
  padding-top: 20px;
}

body.catalog-page #catalog .listing-card {
  border-color: var(--line);
  background: var(--warm-surface);
}

body.catalog-page #catalog[data-view="grid"] .listing-card {
  background: transparent;
}

body.catalog-page #catalog .market-filters,
body.catalog-page .catalog-explore-tile {
  border-color: var(--line);
  background: var(--warm-surface);
  box-shadow: none;
}

body.catalog-page .catalog-explore-tile {
  color: var(--ink);
  border-radius: 12px;
}

body.catalog-page .catalog-explore-tile:hover {
  border-color: #9eae92;
  background: var(--cream);
}

/* === Окна, кабинет и карточки товара: общие поверхности без изменения их сеток. === */
body .modal-card,
body .market-dialog,
body .seo-listing-media,
body .seo-listing-copy {
  background: var(--warm-surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

body .modal-card,
body .market-dialog {
  border-radius: 20px;
}

/* Цветовые уточнения не меняют ширину флажков, резерв стрелки select и размеры фото. */
body .modal-card :is(input, select, textarea),
body .market-dialog :is(input, select, textarea),
body #catalog .market-filters :is(input, select) {
  background-color: var(--warm-surface);
  color: var(--ink);
  border-color: #d9d9cc;
}

body .profile-head,
body .chat-header {
  background: var(--cream);
}

/* Отступы только окна кабинета: используются также для продолжения фона шапки до краёв окна. */
body #profileModal .profile-card {
  --profile-padding-inline: 38px;
  --profile-padding-block: 38px;
  padding: var(--profile-padding-block) var(--profile-padding-inline);
}

/* Шапка кабинета: равные вертикальные отступы не прижимают аватар и имя к верхнему краю плашки. */
body .profile-head {
  position: relative;
  padding-top: 13px;
  padding-bottom: 13px;
}

/* Фон выходит за внутренние отступы шапки до боковых и верхнего края окна.
   Само содержимое не сдвигается; скругления обрезаются существующей границей окна.
   Отрицательный слой остаётся внутри контекста окна, под текстом и крестиком. */
body #profileModal .profile-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(0px - var(--profile-padding-block));
  right: calc(0px - var(--profile-padding-inline));
  bottom: 0;
  left: calc(0px - var(--profile-padding-inline));
  background: var(--cream);
  pointer-events: none;
}

/* В кабинете аватар остаётся у верхнего края имени, даже если длинное имя занимает несколько строк. */
body .profile-head .profile-avatar {
  align-self: start;
}

/* Крестик кабинета находится поверх сплошного фона шапки и выровнен по правому краю содержимого окна. */
body #profileModal .profile-card > .modal-close {
  z-index: 1;
  right: var(--profile-padding-inline);
}

body.seo-listing-page {
  background: var(--paper);
}

/* === Нижние блоки: меньше пустоты, тихая помощь и мягкий призыв разместить объявление. === */
body.home-page .trust {
  padding-top: 36px;
  padding-bottom: 48px;
  border-top: 1px solid var(--line);
}

body.home-page .trust h2 {
  font-size: var(--home-section-title-size);
  font-weight: 600;
  letter-spacing: -1px;
}

body.home-page .trust .eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

body.home-page .trust-items {
  gap: 28px;
  margin-top: 24px;
}

body.home-page .trust article h3 {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
}

body.home-page .cta {
  padding: 36px 0;
  background: var(--cream);
  color: var(--ink);
}

body.home-page .cta-inner {
  gap: 28px;
}

body.home-page .cta h2 {
  font-size: var(--home-section-title-size);
  font-weight: 600;
  letter-spacing: -1px;
}

body.home-page .cta p,
body.home-page .cta .eyebrow {
  color: var(--muted);
}

body.home-page .cream-button {
  flex-shrink: 0;
  background: var(--green);
  color: white;
  border-radius: 10px;
  font-weight: 600;
}

body > footer {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
}

body .footer-brand {
  color: var(--ink);
}

body .footer-inner p,
body .footer-inner small {
  color: var(--muted);
}

/* Кнопка поддержки в подвале: текст без подложки и подчёркивания, прежнее действие по нажатию сохраняется. */
body .footer-support-button {
  background: transparent;
  color: var(--green);
  text-decoration: none;
}

/* На светлом фоне подвала наведение и клавиатурный фокус сохраняют читаемый тёмно-зелёный текст. */
body .footer-support-button:hover,
body .footer-support-button:focus-visible {
  color: var(--warm-hover);
}

/* === Планшеты до 1000 px: компактная шапка, категории без горизонтального скролла. === */
@media (max-width: 1000px) {
  body .topbar {
    gap: 16px;
  }

  body .desktop-nav {
    display: none;
  }

  body.home-page .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 14px 18px;
    padding-top: 24px;
  }

  body.home-page .hero h1 {
    font-size: 25.92px;
    letter-spacing: -1.134px;
  }

  body.home-page .category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.home-page .search-panel,
  body.catalog-page .search-panel {
    grid-template-columns: auto minmax(0, 1fr) minmax(140px, .6fr) auto;
  }

  body .search-panel .all-categories-trigger {
    padding: 0 10px;
  }

  body .search-panel .search-input {
    padding: 0 12px;
  }

  body .search-panel .primary {
    min-width: 80px;
    padding: 12px 18px;
  }
}

/* === До 760 px: город остаётся доступным второй строкой; иллюстрация после текста. === */
@media (max-width: 760px) {
  body .shell {
    width: calc(100% - 36px);
  }

  body .header-actions {
    gap: 6px;
  }

  body .header-actions .text-button {
    max-width: 100px;
  }

  body.home-page .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 0;
  }

  body.home-page .hero-copy {
    padding: 8px 0 0;
  }

  body.home-page .hero h1 {
    font-size: 25.11px;
  }

  body.home-page .hero-art {
    width: min(100%, 390px);
    aspect-ratio: 1.7;
  }

  /* В мобильной одноколоночной версии центрируем видимую композицию с учётом прозрачных полей SVG.
     Область картинки остаётся в сетке; кресло, круг, бобр и телевизор сдвигаются согласованно. */
  body.home-page .hero-chair {
    object-position: 0% 50%;
  }

  body.home-page .hero-art::before {
    left: 42%;
  }

  /* На планшетах бобр сохраняет место между креслом и растением после центрирования рисунка. */
  body.home-page .hero-peek-beaver {
    left: 53%;
    bottom: 38%;
  }

  /* На планшетах телевизор немного шире и сдвинут на кресло, сохраняя бобра над корпусом. */
  body.home-page .hero-vintage-tv {
    width: 40%;
    right: 14%;
  }

  body.home-page .hero-copy p {
    margin-top: 16px;
    font-size: 14px;
  }

  body.home-page .hero-service-label {
    margin-top: 10px;
  }

  body.home-page .search-panel,
  body.catalog-page .search-panel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0;
  }

  body .search-panel .location-input {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 0 10px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  body .search-panel .location-input input {
    min-height: 42px;
  }

  body .search-panel input {
    font-size: 16px;
  }

  body .search-panel .geo-button {
    min-width: 44px;
    min-height: 44px;
  }

  body.home-page .categories {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  body.home-page .category-grid {
    gap: 8px;
  }

  body #catalog[data-view="grid"] .listing-grid {
    gap: 24px 14px;
  }

  body.home-page .cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  body .footer-inner {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}

/* Только кабинет до 600 px: верхний отступ отделяет имя и подпись от области кнопки закрытия. */
@media (max-width: 600px) {
  /* Мобильные отступы окна согласованы с шириной сплошного фона шапки и положением крестика. */
  body #profileModal .profile-card {
    --profile-padding-inline: 20px;
    --profile-padding-block: 28px;
  }

  body .profile-head {
    padding-top: 20px;
  }
}

/* === Телефоны до 550 px: доступные действия аккаунта, две строки шапки и две колонки товаров. === */
@media (max-width: 550px) {
  body .shell {
    width: calc(100% - 28px);
  }

  body .topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body .brand {
    font-size: 23px;
  }

  body .header-actions {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) auto;
    gap: 6px;
    width: 100%;
    margin-left: 0;
  }

  body .header-actions .icon-button,
  body .header-actions .text-button {
    min-height: 44px;
  }

  body .header-actions .text-button {
    max-width: none;
    text-align: left;
  }

  body .primary.small {
    padding: 11px 12px;
    font-size: 11px;
    white-space: normal;
  }

  /* На телефонах базовый размер подписей — 15 px; увеличение подписи сервиса применяется отдельно. */
  body.home-page {
    --home-section-label-size: 15px;
    /* На телефонах заголовки разделов остаются одинаковыми и немного компактнее. */
    --home-section-title-size: 22px;
  }

  body.home-page .hero-copy .eyebrow {
    font-size: var(--home-section-label-size);
    letter-spacing: 1.2px;
    margin-bottom: 12px;
  }

  body.home-page .hero h1 {
    font-size: clamp(19.44px, 5.184vw, 25.11px);
    letter-spacing: -.891px;
  }

  body.home-page .hero-art {
    width: min(100%, 330px);
    aspect-ratio: 1.9;
  }

  /* На телефонах прозрачные поля шире: визуальный центр сохраняется для всей группы, а не только её контейнера. */
  body.home-page .hero-chair {
    object-position: 10% 50%;
  }

  body.home-page .hero-art::before {
    left: 40%;
  }

  /* На телефонах телевизор немного заходит на кресло; отступ учитывает наклон корпуса на 320 px. */
  body.home-page .hero-vintage-tv {
    bottom: 7%;
    right: 17%;
    width: 42%;
  }

  /* На телефонах сохраняем выглядывание над корпусом телевизора при уменьшенной высоте сцены. */
  body.home-page .hero-peek-beaver {
    left: 48.5%;
    bottom: 45%;
    width: 15%;
  }

  /* Кнопка категорий отдельной строкой: запрос не сжимается на ширине 320 px. */
  body.home-page .search-panel,
  body.catalog-page .search-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px;
    margin-top: 4px;
  }

  body .search-panel .all-categories-trigger {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }

  body .search-panel .search-input {
    padding: 0 9px;
  }

  body .search-panel .primary {
    min-width: 70px;
    padding: 12px 15px;
  }

  body .search-panel .location-input {
    grid-row: 3;
  }

  body.home-page .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.home-page .category-grid .category {
    padding: 13px 5px;
    gap: 8px;
  }

  body.home-page .category-grid .category-sketch {
    --sketch-size: 34px;
    --sketch-glyph: 32px;
  }

  body.home-page .categories h2 {
    font-size: var(--home-section-title-size);
    letter-spacing: -.4px;
  }

  body.home-page .categories .link-button {
    font-size: 11px;
  }

  body #catalog .catalog-heading :is(h1, h2) {
    font-size: var(--home-section-title-size, 24px);
    letter-spacing: -.8px;
  }

  body #catalog[data-view="grid"] .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  body #catalog[data-view="grid"] .listing-image {
    aspect-ratio: 1.1;
    border-radius: 12px;
  }

  body #catalog[data-view="grid"] .listing-info > .price {
    font-size: 18px;
  }

  body #catalog[data-view="grid"] .listing-info h3 {
    font-size: 13px;
  }

  body #catalog .meta {
    font-size: 11px;
    gap: 3px;
  }

  body.home-page .trust-items {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body.home-page .trust h2,
  body.home-page .cta h2 {
    font-size: var(--home-section-title-size);
  }
}

/* Сохранение читаемости текста при увеличенном системном шрифте и длинном имени аккаунта. */
@media (max-width: 360px) {
  body .header-actions {
    grid-template-columns: 40px 40px minmax(0, 1fr);
  }

  body .header-actions > .primary.small {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Сенсорные экраны: увеличена только цель кнопки избранного, без изменения размера фото. */
@media (pointer: coarse) {
  body #catalog .favorite {
    width: 44px;
    height: 44px;
    top: 5px;
    right: 5px;
  }
}