.ms-commerce-badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  margin: var(--ms-space-3);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-pill);
  background: rgba(7, 17, 31, 0.94);
  color: var(--ms-color-text);
  font-family: var(--ms-font-utility);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ms-commerce-badge--direct {
  border-color: rgba(34, 197, 94, 0.65);
  color: #86efac;
}

.ms-commerce-badge--consult,
.ms-commerce-badge--order {
  color: var(--ms-color-accent);
}

.ms-commerce-badge--affiliate {
  border-color: rgba(245, 158, 11, 0.65);
  color: #fcd34d;
}

.ms-commerce-badge--unavailable {
  color: var(--ms-color-text-muted);
}

.ms-commerce-action {
  display: grid;
  gap: var(--ms-space-4);
  margin-block: var(--ms-space-6);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background:
    linear-gradient(145deg, rgba(37, 99, 235, 0.1), transparent 56%),
    var(--ms-color-surface);
}

.ms-commerce-notice,
.ms-commerce-disclosure {
  margin: 0 !important;
  color: var(--ms-color-text-muted) !important;
  font-size: var(--ms-text-sm);
}

.ms-commerce-disclosure {
  padding-inline-start: var(--ms-space-4);
  border-left: 2px solid var(--ms-color-warning);
}

.ms-commerce-cta {
  width: fit-content;
}

.products .product-grid-item .ms-commerce-badge {
  position: absolute;
  top: var(--ms-space-2);
  left: var(--ms-space-2);
  margin: 0;
}

@media (max-width: 30rem) {
  .ms-commerce-cta {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .ms-commerce-badge,
  .ms-commerce-action {
    border: 1px solid CanvasText;
  }
}