/* ─── Product Form page wrapper ───────────────────────────────────────────── */

.product-form {
  max-width: 48rem;
  margin: 3rem auto var(--space-section);
  padding: 0 1rem;
}

/* ─── Double-bezel card container ────────────────────────────────────────── */

.product-form__card {
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  padding: 0.375rem;
  border-radius: var(--radius-card);
}

.product-form__card-inner {
  background: var(--color-surface-raised);
  border-radius: var(--radius-inner);
  padding: var(--space-card);
}

/* ─── Form heading ────────────────────────────────────────────────────────── */

.product-form__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 2rem;
}

/* ─── Submit actions row ──────────────────────────────────────────────────── */

.product-form__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
}

/* ─── Trix dark theme overrides ─────────────────────────────────────────── */
/* Default Trix styles use a white background; these overrides match the     */
/* dark glass aesthetic defined in the design system (Ethereal Glass theme). */

.field__trix trix-editor {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-field);
  color: var(--color-ink);
  min-height: 12rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.field__trix trix-editor:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.12);
}

.field__trix trix-toolbar {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-field) var(--radius-field) 0 0;
  padding: 0.25rem 0.5rem;
}

.field__trix trix-toolbar .trix-button {
  background: transparent;
  border: none;
  color: var(--color-ink-muted);
  border-radius: 4px;
  transition: color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
}

.field__trix trix-toolbar .trix-button:hover {
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.06);
}

.field__trix trix-toolbar .trix-button.trix-active {
  color: var(--color-accent);
  background: rgba(212, 168, 83, 0.1);
}

.field__trix trix-toolbar .trix-button-group {
  border: 1px solid var(--color-border);
}

/* Mobile-first: form fills screen on small viewports */
@media (min-width: 48rem) {
  .product-form {
    padding: 0 2rem;
  }
}