.merchant-space {
  --merchant-control-line: oklch(.62 .027 151);
  --merchant-error: oklch(.43 .135 29);
  --merchant-error-bg: oklch(.955 .023 34);
  max-width: 70rem;
  padding-top: clamp(1.6rem, 5vw, 3.4rem);
}
.merchant-page-title h1 { font-size: clamp(2.25rem, 5vw, 3.8rem); }
.merchant-page-title p { max-width: 53ch; margin-top: .6rem; color: var(--muted); }
.merchant-space .button .icon { width: 18px; height: 18px; }
.merchant-space :focus-visible { outline-color: var(--accent); }
.merchant-back, .merchant-text-action, .merchant-item-edit, .merchant-entry-link a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  color: var(--ink); font-weight: 700; text-underline-offset: .22em;
}
.merchant-back { margin-bottom: .45rem; }
.merchant-text-action { padding: .35rem .45rem; border: 0; background: transparent; cursor: pointer; text-decoration: underline; }
.merchant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.merchant-actions form { margin: 0; }
.merchant-help { margin-bottom: .85rem; color: var(--muted); font-size: .9rem; }
.merchant-space .field { min-width: 0; }
.merchant-space .field label { font-size: .9375rem; }
.merchant-space .field input:not([type="checkbox"]), .merchant-space .field select, .merchant-space .field textarea {
  border-color: var(--merchant-control-line);
}
.merchant-space .field-invalid :is(input, select, textarea):not([type="checkbox"]) { border-color: var(--merchant-error); }
.merchant-space .field select { text-overflow: ellipsis; }
.merchant-space .field .check { display: flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 400; }
.merchant-space .field input[type="file"] { max-width: 100%; overflow: hidden; }
.merchant-errors {
  display: grid; gap: .2rem; padding: .8rem 1rem; border: 1px solid var(--merchant-error);
  border-radius: 9px; background: var(--merchant-error-bg); color: var(--merchant-error);
}
.merchant-space .errorlist { color: var(--merchant-error); }

.merchant-entry {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: start; gap: clamp(1.5rem, 5vw, 4.4rem); max-width: 61rem;
}
.merchant-entry-form { display: grid; gap: 1.1rem; margin-top: 1.15rem; }
.merchant-entry-form > .button { justify-self: start; }
.merchant-entry-fields { display: grid; gap: .78rem; }
.merchant-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.merchant-fieldset + .merchant-fieldset { border-top: 1px solid var(--line); padding-top: .3rem; }
.merchant-fieldset legend { padding: 0 .4rem 0 0; margin-bottom: .55rem; font-size: 1.07rem; font-weight: 700; }
.merchant-entry-link { margin-top: .35rem; color: var(--muted); }
.merchant-entry-aside {
  position: sticky; top: 1rem; padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
}
.merchant-sign-icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .85rem;
  border-radius: 9px; background: var(--soft); color: var(--ink);
}
.merchant-entry-aside h2, .merchant-portal-empty h2 { font-size: clamp(1.7rem, 3.5vw, 2.35rem); }
.merchant-entry-roles, .merchant-steps { margin: 1rem 0 0; }
.merchant-entry-roles div + div, .merchant-steps li + li { margin-top: .85rem; }
.merchant-entry-roles dt, .merchant-steps strong { font-weight: 700; }
.merchant-entry-roles dd, .merchant-steps span { display: block; margin: .12rem 0 0; font-size: .94rem; }
.merchant-steps { padding-inline-start: 1.45rem; }
.merchant-steps li { padding-inline-start: .24rem; }
.merchant-steps li::marker { font-weight: 700; }

.merchant-portal-top { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; }
.merchant-stalls { display: grid; gap: 1rem; margin-top: 1.4rem; }
.merchant-stall {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; background: var(--surface);
}
.merchant-stall-profile, .merchant-catalog { min-width: 0; padding: clamp(1rem, 3vw, 1.6rem); }
.merchant-stall-head h2 { margin-bottom: .45rem; font-size: clamp(1.5rem, 3.25vw, 2.15rem); }
.merchant-stall-head p, .merchant-stall-state p, .merchant-catalog-head p, .merchant-items p, .merchant-catalog-empty {
  color: var(--muted); font-size: .9rem;
}
.merchant-stall-state { display: grid; justify-items: start; gap: .4rem; margin-block: .9rem; }
.merchant-status {
  display: inline-flex; align-items: center; gap: .45rem; padding: .24rem .6rem;
  border-radius: 5px; background: #fbebc7; color: #563713; font-size: .875rem; font-weight: 700;
}
.merchant-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.merchant-status.published { background: #e5eedb; color: #234334; }
.merchant-status.rejected { background: var(--merchant-error-bg); color: var(--merchant-error); }
.merchant-status.hidden { background: #e7ebe3; color: #35463d; }
.merchant-note { padding: .7rem .8rem; margin-bottom: .85rem; border-radius: 8px; background: var(--soft); overflow-wrap: anywhere; }
.merchant-note strong { display: block; margin-bottom: .16rem; }
.merchant-catalog { border-inline-start: 1px solid var(--line); }
.merchant-catalog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; }
.merchant-catalog-head h3 { font-size: 1.2rem; }
.merchant-catalog-head .button { text-align: start; }
.merchant-catalog-empty { padding-block: .8rem; margin-top: .65rem; border-top: 1px solid var(--line); }
.merchant-items { margin: .7rem 0 0; padding: 0; list-style: none; }
.merchant-items li {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .55rem;
  padding: .55rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere;
}
.merchant-items li > div { min-width: 0; }
.merchant-item-edit { padding-inline: .35rem; }
.merchant-item-edit .icon { width: 16px; height: 16px; }
.merchant-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.merchant-portal-empty { display: grid; justify-items: start; gap: .65rem; }
.merchant-portal-empty .merchant-sign-icon { margin: 0; }

.merchant-editor-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.merchant-editor-grid { display: grid; grid-template: "sections guide" auto / minmax(0,1fr) 17rem; align-items: start; gap: 1.35rem; }
.merchant-editor-guide {
  grid-area: guide; position: sticky; top: 1rem; padding: 1rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--soft);
}
.merchant-editor-guide h2 { margin-bottom: .35rem; font: 700 1.07rem/1.3 var(--ui); letter-spacing: normal; }
.merchant-editor-guide p { font-size: .91rem; }
.merchant-editor-guide ul { margin: .65rem 0 0; padding: 0; list-style: none; }
.merchant-editor-guide a { display: flex; align-items: center; min-height: 44px; padding-block: .3rem; font-weight: 700; }
.merchant-editor-guide li + li { border-top: 1px solid var(--line); }
.merchant-editor-sections { display: grid; grid-area: sections; gap: 1rem; min-width: 0; }
.merchant-editor-section {
  min-width: 0; margin: 0; padding: .9rem clamp(.8rem, 2.25vw, 1.4rem) 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.merchant-editor-section legend { padding-inline: .45rem; font-size: 1.09rem; font-weight: 700; }
.merchant-fields, .merchant-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .95rem; }
.merchant-fields .field:has(textarea) { grid-column: 1 / -1; }
.merchant-photo { display: grid; align-content: start; gap: .75rem; min-width: 0; }
.merchant-thumb { width: 128px; height: 88px; object-fit: cover; border-radius: 8px; }
.merchant-retire { padding-inline: .75rem; border: 1px solid var(--line); border-radius: 9px; }
.merchant-retire summary { min-height: 44px; padding-block: .55rem; font-weight: 700; cursor: pointer; }
.merchant-retire p { padding-block: .35rem .7rem; color: var(--muted); }
.merchant-retire .button { margin-bottom: .75rem; color: var(--merchant-error); }

@media (max-width: 48rem) {
  .merchant-entry, .merchant-stall { grid-template-columns: minmax(0,1fr); }
  .merchant-entry-aside, .merchant-editor-guide { position: static; }
  .merchant-catalog { border-inline-start: 0; border-top: 1px solid var(--line); }
  .merchant-editor-grid { grid-template: "guide" auto "sections" auto / minmax(0,1fr); gap: .85rem; }
  .merchant-editor-guide ul { display: flex; flex-wrap: wrap; gap: 0 .9rem; }
  .merchant-editor-guide li + li { border: 0; }
}
@media (max-width: 34rem) {
  .merchant-entry-form > .button, .merchant-save > .primary { width: 100%; }
  .merchant-fields, .merchant-photos { grid-template-columns: minmax(0,1fr); }
  .merchant-photo + .merchant-photo { padding-top: .75rem; border-top: 1px solid var(--line); }
  .merchant-catalog-head .button { justify-content: start; }
}
@media (max-width: 22.5rem) {
  .merchant-account-actions .button { padding-inline: .65rem; }
  .merchant-account-actions .button .icon { display: none; }
}
