/* ============================================================================
   VITRINE — EMPTY + ERROR STATES
   assets/vitrine.state.css

   An empty region is not an empty state. Every one of these says what
   happened and offers the one action that resolves it.

   Deliberately quiet: an empty shelf is an ordinary condition in a product
   with a small catalogue, not a fault. Only genuine errors take colour.
   ========================================================================== */

.vt-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--vt-space-3);

  padding: var(--vt-space-12) var(--vt-space-6);
  text-align: center;
  color: var(--vt-text-secondary);
}

/* Inside a shelf rather than instead of a page. */
.vt-state--inline {
  padding: var(--vt-space-8) var(--vt-space-4);
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-fill-quiet);
}

.vt-state__mark {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--vt-radius-full);
  background-color: var(--vt-fill-quiet);
  color: var(--vt-icon-secondary);
}
.vt-state--error .vt-state__mark { color: var(--vt-danger); background-color: var(--vt-danger-quiet); }

.vt-state__title {
  margin: 0;
  font-size: var(--vt-fs-md);
  font-weight: var(--vt-fw-medium);
  color: var(--vt-text-primary);
}
.vt-state__body {
  margin: 0;
  max-inline-size: 42ch;
  font-size: var(--vt-fs-sm);
  line-height: var(--vt-lh-normal);
  color: var(--vt-text-tertiary);
}
.vt-state__action { margin-block-start: var(--vt-space-2); }