/* custom colors */
.commerce-state[data-v-3443d2e1] {
  display: flex;
  min-height: 220px;
  padding: var(--space-8);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--text-primary);
  text-align: center;
}
.commerce-state--surface[data-v-3443d2e1] {
  background-color: var(--surface-primary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.commerce-state--compact[data-v-3443d2e1] {
  min-height: 160px;
  padding: var(--space-6);
  gap: var(--space-3);
}
.commerce-state__visual[data-v-3443d2e1] {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--commerce-state-soft);
  color: var(--commerce-state-color);
}
.commerce-state__visual svg[data-v-3443d2e1]:not(.brand-loader) {
  width: 32px;
  height: 32px;
}
.commerce-state__visual .commerce-state__loading-indicator[data-v-3443d2e1] {
  display: grid;
  width: 124px;
  height: 54px;
  place-items: center;
}
.commerce-state--loading .commerce-state__visual[data-v-3443d2e1] {
  width: 132px;
  height: 64px;
  background: transparent;
}
.commerce-state__copy[data-v-3443d2e1] {
  max-width: 46ch;
}
.commerce-state__title[data-v-3443d2e1] {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-heading-5-size);
}
.commerce-state__description[data-v-3443d2e1] {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-label-size);
}
.commerce-state__actions[data-v-3443d2e1] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.commerce-state--loading[data-v-3443d2e1] {
  --commerce-state-color: var(--brand-primary);
  --commerce-state-soft: var(--brand-soft);
  background-color: var(--shell-surface);
  border-color: color-mix(in srgb, var(--brand-highlight) 32%, var(--shell-surface));
  border-style: solid;
}
.commerce-state--loading .commerce-state__title[data-v-3443d2e1] {
  color: var(--text-inverse);
}
.commerce-state--loading .commerce-state__description[data-v-3443d2e1] {
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
}
.commerce-state--empty[data-v-3443d2e1] {
  --commerce-state-color: var(--text-secondary);
  --commerce-state-soft: var(--surface-subtle);
}
.commerce-state--error[data-v-3443d2e1] {
  --commerce-state-color: var(--semantic-danger);
  --commerce-state-soft: var(--semantic-danger-soft);
}
@media (max-width: 479.98px) {
.commerce-state[data-v-3443d2e1] {
    min-height: 180px;
    padding: var(--space-6) var(--space-4);
}
}