.capra-reactions {
  --cr-charcoal: #252422;
  --cr-cream: #f7e9d6;
  --cr-olive: #68663d;
  --cr-border: #d8c9b5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: .35rem;
  width: 100%;
  padding: .15rem 0;
}
.capra-reaction {
  min-width: 76px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .25rem .35rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--cr-charcoal);
  cursor: pointer;
}
.capra-reaction img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 56px;
}
.capra-reaction__count {
  min-width: 1ch;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.capra-reactions__sep {
  width: 1px;
  height: 38px;
  flex: 0 0 1px;
  background: var(--cr-border);
}
.capra-reaction:hover,
.capra-reaction:focus-visible { background: rgba(247, 233, 214, .65); }
.capra-reaction:focus-visible { outline: 2px solid var(--cr-olive); outline-offset: 2px; }
.capra-reaction[aria-pressed="true"] {
  border-color: rgba(104, 102, 61, .5);
  background: rgba(104, 102, 61, .09);
}
.capra-reaction[aria-pressed="true"] img { filter: contrast(1.12); }
.capra-reaction:disabled { opacity: .65; cursor: wait; }
.capra-reactions__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 340px) {
  .capra-reaction { min-width: 70px; min-height: 60px; padding-left: .2rem; padding-right: .2rem; }
  .capra-reaction img { width: 52px; height: 52px; flex-basis: 52px; }
  .capra-reactions { gap: .2rem; }
}