.header-status[data-acceptance-state="open"] {
  color: var(--muted);
}

.header-status[data-acceptance-state="open"] .status-dot {
  background: var(--success);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--success), transparent 82%);
}

.header-status[data-acceptance-state="paused"],
.header-status[data-acceptance-state="closed"] {
  color: var(--danger);
}

.header-status[data-acceptance-state="paused"] .status-dot,
.header-status[data-acceptance-state="closed"] .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--danger), transparent 82%);
}

.header-status[data-acceptance-state="unavailable"] {
  color: color-mix(in srgb, var(--ink), var(--accent) 42%);
}

.header-status[data-acceptance-state="unavailable"] .status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--accent), transparent 78%);
}

.header-status[data-acceptance-state="loading"],
.header-status[data-acceptance-state="offline"],
.header-status[data-acceptance-state="stale"] {
  color: var(--muted);
}

.header-status[data-acceptance-state="loading"] .status-dot,
.header-status[data-acceptance-state="offline"] .status-dot,
.header-status[data-acceptance-state="stale"] .status-dot {
  background: var(--muted);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--muted), transparent 82%);
}

.cart-service[data-service-state="paused"],
.cart-service[data-service-state="closed"] {
  border-color: color-mix(in srgb, var(--danger), var(--line) 55%);
}

.cart-service[data-service-state="paused"] .cart-service-heading small,
.cart-service[data-service-state="closed"] .cart-service-heading small {
  color: var(--danger);
}