/* Каталог услуг РемПроМобайл — использует токены темы rempro. */
:root {
  --c-line: var(--line, #e8dfe7);
  --c-brand: var(--brand-700, #531d4d);
  --c-red: var(--red-600, #c80731);
}
.rpm-cat { max-width: 1160px; margin: 0 auto; }
.rpm-cat.is-loading .rpm-cat__list { opacity: .55; transition: opacity .15s; }

/* Поиск */
.rpm-cat__search { display: flex; gap: 10px; }
.rpm-cat__search input {
  flex: 1; min-width: 0; padding: 15px 18px; font: inherit; font-size: 16.5px;
  border-radius: 10px; border: 1.5px solid var(--c-line); background: #fff;
  color: inherit; outline: none; box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(28,19,32,.05);
  transition: border-color .15s, box-shadow .15s;
}
.rpm-cat__search input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 4px rgba(212,142,204,.28); }
.rpm-cat__go {
  flex: none; padding: 15px 26px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--c-red); color: #fff; font: inherit; font-weight: 650; font-size: 16px;
  transition: background .15s;
}
.rpm-cat__go:hover { background: var(--red-700, #9d0626); }
@media (max-width: 560px) { .rpm-cat__search { flex-direction: column; } }

/* Чипы брендов */
.rpm-cat__brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
.rpm-chip {
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--c-line); background: #fff; color: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.rpm-chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
a.rpm-chip { text-decoration: none; display: inline-block; }
.rpm-chip span { opacity: .5; font-size: 12px; margin-left: 3px; }
.rpm-chip--on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: 600; }
.rpm-chip--on:hover { color: #fff; }
.rpm-chip--on span { color: #fff; opacity: .7; }

.rpm-cat__meta { margin: 8px 0 16px; color: var(--muted, #6f6270); font-size: 14px; min-height: 1.2em; }

/* Список услуг */
.rpm-cat__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.rpm-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 12px; text-decoration: none; color: inherit;
  border: 1px solid var(--c-line); background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rpm-card:hover { border-color: var(--pink-200, #efc9ea); box-shadow: 0 2px 4px rgba(28,19,32,.05), 0 8px 20px rgba(28,19,32,.07); transform: translateY(-2px); }
.rpm-card__img { flex-shrink: 0; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--pink-50, #fdf6fc); }
.rpm-card__img:empty { display: none; }
.rpm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpm-card__t { font-size: 15px; line-height: 1.35; flex: 1; }
.rpm-card__p { white-space: nowrap; font-weight: 700; color: var(--c-red); font-size: 15.5px; }
.rpm-card__p--ask { font-weight: 400; color: var(--muted, #6f6270); font-size: 13px; }

.rpm-cat__more { text-align: center; margin: 22px 0 0; }
#rpm-more {
  padding: 12px 30px; border-radius: 10px; border: 1.5px solid var(--c-line);
  background: #fff; color: inherit; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
  transition: border-color .15s, color .15s;
}
#rpm-more:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* Крауляемая навигация по брендам */
.rpm-cat__brandnav { margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--c-line); }
.rpm-cat__brandnav h2 { font-size: 21px; margin: 0 0 14px; }
.rpm-cat__brandnav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 18px; }
.rpm-cat__brandnav li { font-size: 15px; }
.rpm-cat__brandnav a { color: var(--c-brand); text-decoration: none; }
.rpm-cat__brandnav a:hover { text-decoration: underline; color: var(--c-red); }
.rpm-cat__brandnav span { color: var(--muted, #6f6270); font-size: 12.5px; }

@media (max-width: 480px) { .rpm-cat__list { grid-template-columns: 1fr; } }