/* Строка вида карты в списке «Карты»: обложка-миниатюра, имя,
   скидка, число клиентов. Тот же рисунок, что у строки клиента
   (client.css) — своими классами, не общими: две сущности читаются
   разными людьми, а совпавшее имя класса однажды собьёт с толку. */

.cardkinds { display: flex; flex-direction: column; gap: var(--sp-2); }

.cardkind-line {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: background var(--fast) var(--ease);
}

.cardkind-line:active { background: var(--surface-2); }

.cardkind {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
  color: var(--text);
  text-decoration: none;
}

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

.cardkind__body { flex: 1; min-width: 0; }

.cardkind__name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -.01em;
}

.cardkind__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.cardkind__discount { color: var(--accent-text); font-weight: 650; }

.cardkind__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
}

.cardkind__side {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3) 0 0;
}

.cardkind__go,
.cardkind__more {
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: var(--bg-app);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.cardkind__go .icon,
.cardkind__more .icon { width: var(--fs-md); height: var(--fs-md); }

.cardkind__go:active,
.cardkind__more:active { background: var(--surface-2); }

@media (hover: hover) {
  .cardkind__go:hover,
  .cardkind__more:hover { color: var(--text); }
}

/* Степпер скидки: минус и плюс по краям, число посередине. Числу
   своя моноширинная колонка — иначе смена «5%» на «15%» дёргает
   кнопки вправо-влево при каждом нажатии. */
.field--stepper {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  height: auto;
  min-height: 0;
  padding: var(--sp-3) var(--sp-5);
}

.stepper { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }

.stepper__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.stepper__btn:active { background: var(--surface); }

.stepper__btn .icon { width: var(--fs-md); height: var(--fs-md); }

.stepper__value {
  width: 6ch;
  border: none;
  background: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper__value::-webkit-inner-spin-button,
.stepper__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (hover: hover) {
  .stepper__btn:hover { border-color: var(--accent-dim); }
}

/* Превью обложки в кнопке-выборе — та же плитка, что и миниатюра
   в списке, только на месте иконки поля. */
.cardkind__swatch {
  flex: none;
  width: var(--sp-10);
  aspect-ratio: 1.586;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
}