/* Карточка услуги (ui/service-row.js): лицо-фото слева, цена акцентом,
   старая цена рядом — зачёркнутая, мельче. Тот же рисунок строки,
   что у вида карты (card-kind.css) — своё здесь только лицо и деньги.

   Литералы цвета — только themes.css: здесь и в тенях/градиентах
   этого файла их нет ни одного. */

.service__face {
  flex: none;
  width: var(--sp-14);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
}

.service__face--blank {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-faint);
}

.service__face--blank .icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

.service__money {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.service__price {
  color: var(--accent-text);
  font-weight: 650;
  font-size: var(--fs-md);
}

.service__old-price {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-decoration: line-through;
}

/* Полки-вкладки фильтра: число групп произвольное, не два-три, как
   у `.tabs` — лента едет вбок, а не сжимает подписи. */
.service-groups {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}

.service-groups::-webkit-scrollbar { display: none; }

.service-groups__item {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.service-groups__item.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .service-groups__item:hover:not(.is-on) { background: var(--surface-2); }
}