/* Угловые кнопки на лице карты — отдельно от card-face.css по длине.

   Смена оформления — шестерёнкой в углу знака компании: вид карты
   принадлежит ей, и кнопка сидит на её лице, а не поверх кода
   или узора, где свободного места нет вовсе. */
.cardface__look {
  position: absolute;
  right: calc(var(--sp-1) * -1);
  bottom: calc(var(--sp-1) * -1);
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: var(--card-plate);
  color: var(--card-ink);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.cardface__look .icon { width: var(--fs-xs); height: var(--fs-xs); }

.cardface__look:active { background: var(--card-veil); }

@media (hover: hover) {
  .cardface__look:hover { background: var(--card-veil); }
}

/* Дела с картой — тот же угол и тот же вид, что у обложки вида
   (pages/card-kind-detail.css .kindcover__act): верхний правый угол
   лица, не строка кнопок под ним. */
.cardface__more {
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: var(--card-plate);
  color: var(--card-ink);
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.cardface__more:active { transform: scale(.94); }

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

@media (hover: hover) {
  .cardface__more:hover { background: var(--card-veil); }
}

/* Скидка в правом верхнем углу лица (cardface__rate) иначе легла бы
   под круглую кнопку — той же ширины, что сама кнопка с отступом
   от края, добавленной к обычному отступу лица. */
.cardface--more .cardface__top { padding-right: var(--sp-10); }