.commerce-shell,
.commerce-shell *,
.commerce-shell *::before,
.commerce-shell *::after {
  box-sizing: border-box;
}

.commerce-shell {
  margin: 0;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.commerce-form input,
.commerce-form select,
.commerce-form textarea,
.commerce-form label,
.commerce-form > * {
  min-width: 0;
}

.mobile-view-switcher {
  display: none;
}

.upload-input:focus-visible + .upload-box {
  outline: 2px solid #7f7569;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .commerce-shell {
    padding: 20px 14px calc(48px + env(safe-area-inset-bottom));
  }

  .commerce-brand {
    margin-bottom: 26px;
  }

  .commerce-card {
    padding: 22px;
  }

  .credential-toast {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .topbar {
    position: relative;
  }

  .topbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-actions .entitlement-badge {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
  }

  .topbar-actions button {
    min-width: 0;
    min-height: 42px;
    white-space: normal;
  }

  .mobile-view-switcher {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid #d9d5cc;
    background: rgba(247, 245, 240, 0.98);
    backdrop-filter: blur(14px);
  }

  .mobile-view-switcher button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #6f675f;
    cursor: pointer;
  }

  .mobile-view-switcher button[aria-pressed="true"] {
    border-color: #2e2924;
    background: #2e2924;
    color: #fff;
  }

  .mobile-view-switcher button:focus-visible {
    outline: 2px solid #7f7569;
    outline-offset: 2px;
  }

  .workspace {
    display: block;
    min-height: 0;
  }

  .workspace[data-mobile-view="edit"] .preview-panel,
  .workspace[data-mobile-view="preview"] .editor-panel {
    display: none;
  }

  .editor-panel {
    display: flex;
    flex-direction: column;
    padding: 4px 16px calc(54px + env(safe-area-inset-bottom));
  }

  .editor-panel > section {
    width: 100%;
  }

  #existingSiteSection { order: 0; }
  #photoSection { order: 1; }
  #scenarioSection { order: 2; }
  #briefSection { order: 3; }
  #themeSection { order: 4; }
  #candidateSection { order: 5; }
  #fineTuneSection { order: 6; }
  #diagnosticSection { order: 7; }

  #photoSection {
    padding-top: 18px;
  }

  .section-step {
    display: none;
  }

  .upload-box {
    min-height: 124px;
  }

  .preview-panel,
  .workspace[data-mobile-view="preview"] .preview-panel {
    display: block;
    order: initial;
    min-height: 0;
    padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
  }

  .preview-panel iframe {
    height: calc(100vh - 88px);
    height: calc(100dvh - 88px);
    min-height: 420px;
  }
}