.hyperion-commerce {
  --hyperion-ink: #17352f;
  --hyperion-jade: #087f68;
  --hyperion-mint: #dff3eb;
  --hyperion-coral: #e9543f;
  --hyperion-paper: #f8fbf9;
  margin: 2rem 0;
  border: 1px solid #cfe1da;
  border-left: 5px solid var(--hyperion-jade);
  border-radius: 10px;
  background: var(--hyperion-paper);
  color: var(--hyperion-ink);
  box-shadow: 0 8px 24px rgba(23, 53, 47, .08);
  overflow: hidden;
}

.hyperion-commerce__header { padding: 1.15rem 1.25rem .85rem; }
.hyperion-commerce__eyebrow,
.hyperion-commerce__label {
  display: block;
  color: var(--hyperion-jade);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.hyperion-commerce h2 { margin: .25rem 0 0; color: var(--hyperion-ink); font-size: 1.35rem; line-height: 1.2; }
.hyperion-commerce__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #cfe1da; }
.hyperion-commerce__item { display: flex; min-width: 0; padding: 1.15rem 1.25rem; flex-direction: column; gap: .45rem; }
.hyperion-commerce__item + .hyperion-commerce__item { border-left: 1px solid #cfe1da; }
.hyperion-commerce__item p,
.hyperion-commerce__item small { margin: 0; line-height: 1.45; }
.hyperion-commerce__item small { display: block; color: #4f6862; }
.hyperion-commerce__coupon { align-self: flex-start; padding: .45rem .65rem; border: 1px dashed var(--hyperion-coral); border-radius: 5px; background: #fff4f1; color: #a52e20; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; }
.hyperion-commerce__rating { display: flex; align-items: center; gap: .75rem; }
.hyperion-commerce__rating strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.hyperion-commerce__meter { width: 5rem; height: .45rem; border-radius: 999px; background: var(--hyperion-mint); overflow: hidden; }
.hyperion-commerce__meter i { display: block; height: 100%; border-radius: inherit; background: var(--hyperion-jade); }
.hyperion-commerce__note { margin: 0; padding: .7rem 1.25rem; border-top: 1px solid #cfe1da; background: var(--hyperion-mint); color: #385b53; font-size: .78rem; line-height: 1.45; }

@media (max-width: 720px) {
  .hyperion-commerce__grid { grid-template-columns: 1fr; }
  .hyperion-commerce__item + .hyperion-commerce__item { border-top: 1px solid #cfe1da; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hyperion-commerce * { scroll-behavior: auto !important; }
}