.card:not(.resource-tile) .card-info {
  padding: 14px;
}

.card-info .product-title-row {
  gap: 10px;
}

.card-info .product-title-row > .product-metrics {
  flex: 0 0 auto;
  gap: 12px;
  min-height: 24px;
  margin: -6px -8px -6px auto;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 13px;
  transform-origin: right center;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.card-info .product-title-row > .product-metrics:hover {
  z-index: 4;
  border-color: rgba(225, 255, 106, .34);
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(32, 39, 33, .72));
  color: #f4f7f1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .16), 0 0 18px rgba(216, 248, 0, .12);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  transform: scale(1.08);
}

.card-info .product-title-row > .product-metrics:hover svg {
  filter: drop-shadow(0 0 5px rgba(231, 255, 0, .28));
}

.product-metric-action {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: color .16s ease, transform .16s ease;
}

.product-metric-action:hover,
.product-metric-action.selected {
  color: var(--accent);
}

.product-metric-action:active {
  transform: scale(.94);
}

.product-metric-action.selected svg {
  fill: currentColor;
}

@media (max-width: 760px) {
  .card:not(.resource-tile) .card-info {
    padding: 11px;
  }

  .card-info .product-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .card-info .product-title-row > .product-metrics {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .card-info .product-title-row > .product-metrics:hover {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-info .product-title-row > .product-metrics {
    transition: none;
  }
}