/* Familiar purchases become categories, without an enclosing dashboard. */
#ofCardOrg .of-stage-org {
  min-height: 427px;
  padding-bottom: 30px;
}
.ofcat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 340px;
  transform: translateY(10px);
  opacity: 1;
  transition: opacity 240ms ease;
}
.ofcat-purchase { min-width: 0; text-align: center; }
.ofcat-receipt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ofcat-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(86px, 90%);
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  background: #111113;
  border: 1px solid #ffffff21;
  box-shadow: 0 6px 18px #0005;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease, transform 560ms cubic-bezier(.22,1,.36,1);
}
.ofcat-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ofcat-purchase--ifood .ofcat-brand { background: #ea1d2c; border-color: #ffffff12; }
.ofcat-purchase--ifood .ofcat-brand img { width: 70%; height: auto; }
.ofcat-purchase--spotify .ofcat-brand img { width: 67%; height: auto; }
.ofcat-price {
  color: #dedee3;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 380ms cubic-bezier(.22,1,.36,1);
}
.ofcat-assignment {
  display: block;
  width: 1px;
  height: 28px;
  margin: 16px auto 12px;
  background: #ffffff30;
  transform-origin: top;
  transition: transform 420ms cubic-bezier(.22,1,.36,1), opacity 240ms ease;
}
.ofcat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 3px;
  border: 1px solid #ffffff17;
  border-radius: 8px;
  background: linear-gradient(180deg, #19191c, #121214);
  color: #d8d8df;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: opacity 260ms ease, transform 400ms cubic-bezier(.22,1,.36,1);
}
.ofcat-purchase[data-state="idle"] .ofcat-brand { opacity: 0; transform: translateY(8px); }
.ofcat-purchase:is([data-state="idle"], [data-state="brand"]) .ofcat-price { opacity: 0; transform: translateY(4px); }
.ofcat-purchase:is([data-state="idle"], [data-state="brand"], [data-state="priced"]) .ofcat-assignment { transform: scaleY(0); opacity: 0; }
.ofcat-purchase:not([data-state="done"]) .ofcat-label { opacity: 0; transform: translateY(-4px); }
.ofcat.is-leaving { opacity: 0; }
.ofcat.is-priming, .ofcat.is-priming * { transition: none !important; }
@media (min-width: 961px) and (max-width: 1100px) {
  .ofcat { gap: 6px; }
  .ofcat-label { font-size: 11px; letter-spacing: -.025em; padding-inline: 1px; }
}
@media (max-width: 600px) {
  #ofCardOrg .of-stage-org { flex: none; min-height: 320px; padding-bottom: 28px; }
  .ofcat { gap: 10px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ofcat { transition: none !important; }
  .ofcat * { animation: none !important; transition: none !important; }
}