/**/
/* THIS FILE AUTOGENERATED FROM CSS in ./web/css/ */ 
/**/
/* Page shell under #saito-header */

.saito-container.store-container {
  display: block;
  position: absolute;
  top: var(--saito-header-height);
  width: 100%;
  height: calc(100% - var(--saito-header-height));
  max-width: none;
  margin: 0;
  padding: 0.5rem max(var(--saito-space-lg), calc((100vw - var(--saito-width)) / 2))
    var(--saito-space-xl);
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-columns: unset;
  column-gap: unset;
  -webkit-overflow-scrolling: touch;
}

/* Listing detail — wide product sheet (NFT picker sizes itself in store-nft-picker.css) */
.saito-overlay:has(> .listing-detail) {
  width: min(92vw, 96rem);
  max-width: calc(100vw - 2 * var(--saito-space-md));
}

@media (max-width: 900px) {
  .saito-container.store-container {
    padding: 0.5rem var(--saito-space-lg) var(--saito-space-lg);
  }

  .saito-overlay:has(> .listing-detail) {
    width: min(96vw, 96rem);
    max-width: calc(100vw - 2 * var(--saito-space-sm));
  }
}

@media (max-width: 600px) {
  .saito-container.store-container {
    padding: 0.5rem max(var(--saito-space-md), env(safe-area-inset-right, 0px))
      calc(var(--saito-space-xl) + env(safe-area-inset-bottom, 0px))
      max(var(--saito-space-md), env(safe-area-inset-left, 0px));
  }

  .saito-overlay:has(> .listing-detail) {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
  }
}
/* Namespace: .listing-detail — product / listing workspace */

.listing-detail {
  display: flex;
  flex-direction: column;
  width: min(92vw, 96rem);
  max-width: 100%;
  height: min(90vh, 64rem);
  height: min(90dvh, 64rem);
  max-height: min(90vh, 64rem);
  max-height: min(90dvh, 64rem);
  overflow: hidden;
  box-sizing: border-box;
}

.listing-detail > header {
  display: flex;
  align-items: center;
  gap: var(--saito-space-md);
  flex: 0 0 auto;
  /* Symmetric vertical rhythm; extra right inset clears Saito closebox */
  padding: var(--saito-space-lg) 5.25rem var(--saito-space-lg) var(--saito-space-xl);
  border-bottom: 1px solid var(--saito-border);
}

.listing-detail > header .saito-identicon {
  flex: 0 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  min-width: 4.6rem;
  min-height: 4.6rem;
  border: none;
  border-radius: var(--saito-radius);
  object-fit: cover;
}

/* Pencil sits on the text baseline, immediately beside the value */
.listing-detail .saito-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.05rem 0.2rem;
  vertical-align: baseline;
  font-size: 1.15rem;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.listing-detail .saito-icon-button i {
  display: block;
  line-height: 1;
}

.listing-detail .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Title + edit icon = one inline unit; text truncates, icon never clipped */
.listing-detail .title {
  margin: 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  font-size: var(--font-size-large);
  font-family: var(--saito-font-medium);
  line-height: 1.2;
  overflow: visible;
}

.listing-detail .title .title-text,
.listing-detail .title [data-field='title'] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-detail .title .saito-icon-button {
  flex: 0 0 auto;
  margin: 0;
  /* Keep pen optically on the title baseline */
  transform: translateY(0.05em);
}

.listing-detail .amount,
.listing-detail .text,
.listing-detail .facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.45rem;
  row-gap: 0;
}

.listing-detail .amount [data-field],
.listing-detail .text [data-field],
.listing-detail .facts dd [data-field] {
  min-width: 0;
}

.listing-detail .amount .saito-icon-button,
.listing-detail .text .saito-icon-button,
.listing-detail .facts dd .saito-icon-button {
  flex: 0 0 auto;
}

.listing-detail .creator {
  margin: 0;
  font-family: var(--saito-font-mono, ui-monospace, monospace);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--saito-muted-foreground);
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

.listing-detail > .body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.95fr);
  gap: var(--saito-space-xl);
  flex: 1 1 auto;
  min-height: 0;
  /* Equal top/bottom + left/right — same token as header horizontal inset */
  padding: var(--saito-space-xl);
  overflow: hidden;
  align-items: stretch;
  box-sizing: border-box;
}

/* Buy + Create share the same details column rhythm */
.listing-detail.view .details,
.listing-detail.edit .details {
  gap: var(--saito-space-lg);
}

.listing-detail.view .section + .section:not(.checkout),
.listing-detail.edit .section + .section:not(.checkout) {
  padding-top: var(--saito-space-md);
}

.listing-detail .gallery {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-md);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.listing-detail .media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--saito-muted);
  border-radius: var(--saito-radius-lg);
}

.listing-detail .media .image,
.listing-detail .media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-detail .media-content,
.listing-detail .media-text {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: var(--saito-space-lg);
}

.listing-detail .loader {
  position: absolute;
  right: var(--saito-space-md);
  bottom: var(--saito-space-md);
  font-size: 1.1rem;
  color: var(--saito-foreground);
  opacity: 0.7;
  pointer-events: none;
}

.listing-detail .thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: var(--saito-space-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.listing-detail .thumb {
  flex: 0 0 auto;
  width: 4.75rem;
  height: 3.6rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--saito-radius-sm);
  background: var(--saito-muted);
  cursor: pointer;
  opacity: 0.72;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease;
}

.listing-detail .thumb:hover,
.listing-detail .thumb.active {
  opacity: 1;
}

.listing-detail .thumb:focus-visible {
  outline: none;
  box-shadow: var(--saito-focus-ring);
  opacity: 1;
}

.listing-detail .thumb.active {
  border-color: var(--saito-primary);
}

.listing-detail .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-detail .details {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-lg);
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--saito-space-xs);
}

.listing-detail .section {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-sm);
  min-width: 0;
}

.listing-detail .section + .section:not(.checkout) {
  padding-top: var(--saito-space-md);
  border-top: 1px solid var(--saito-border);
}

.listing-detail .label {
  margin: 0;
  font-size: var(--font-size-tiny);
  font-family: var(--saito-font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--saito-muted-foreground);
}

.listing-detail .amount {
  margin: 0;
  font-size: 2.5rem;
  font-family: var(--saito-font-heavy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.listing-detail .next-bid,
.listing-detail .text {
  margin: 0;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--saito-muted-foreground);
  overflow-wrap: anywhere;
}

.listing-detail .text {
  color: var(--saito-foreground);
}

.listing-detail .facts {
  display: grid;
  gap: var(--saito-space-sm);
  margin: 0;
}

.listing-detail .facts > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--saito-space-sm);
  align-items: baseline;
  min-width: 0;
}

.listing-detail .facts dt,
.listing-detail .facts dd {
  margin: 0;
  font-size: var(--font-size-tiny);
  min-width: 0;
  overflow-wrap: anywhere;
}

.listing-detail .facts dt {
  color: var(--saito-muted-foreground);
}

.listing-detail .facts dt::after {
  content: none;
}

.listing-detail .seller-key {
  font-family: var(--saito-font-mono, ui-monospace, monospace);
  font-size: 1.15rem;
  line-height: 1.4;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Buy overlay — checkout is the primary action cluster */
.listing-detail.view .checkout {
  gap: var(--saito-space-lg);
  padding-top: var(--saito-space-lg);
}

.listing-detail.view .note {
  min-height: 11rem;
}

.listing-detail .checkout {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  gap: var(--saito-space-md);
  padding-top: var(--saito-space-md);
}

.listing-detail .quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--saito-space-sm);
}

.listing-detail .quantity label {
  margin: 0;
  font-size: var(--font-size-tiny);
  color: var(--saito-muted-foreground);
}

.listing-detail .quantity input {
  width: 5rem;
  min-height: 2.75rem;
}

.listing-detail .hint {
  font-size: var(--font-size-tiny);
  color: var(--saito-muted-foreground);
}

.listing-detail .note {
  width: 100%;
  min-height: 6rem;
  box-sizing: border-box;
}

.listing-detail .action {
  align-self: stretch;
  width: 100%;
  min-height: 2.75rem;
}

/* Field-edit dialog — spacing on top of saito-overlay-form */
.store-listing-field-edit.saito-overlay-form {
  gap: var(--saito-space-xxl);
  padding: var(--saito-space-xxl);
}

.store-listing-field-edit .saito-button-row {
  margin-top: var(--saito-space-sm);
}

@media (max-width: 900px) {
  .listing-detail {
    width: min(96vw, 96rem);
    height: min(92dvh, 64rem);
    max-height: min(92dvh, 64rem);
  }

  .listing-detail > header {
    padding: var(--saito-space-lg) 5rem var(--saito-space-lg) var(--saito-space-lg);
  }

  .listing-detail > .body {
    grid-template-columns: 1fr;
    gap: var(--saito-space-lg);
    padding: var(--saito-space-lg);
    overflow: auto;
  }

  .listing-detail .gallery {
    height: auto;
    min-height: 22rem;
  }

  .listing-detail .media {
    min-height: 22rem;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }

  .listing-detail .details {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }

  .listing-detail .amount {
    font-size: 2rem;
  }

  .listing-detail .facts > div {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .listing-detail {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  .listing-detail > header {
    padding: var(--saito-space-md);
    padding-top: max(var(--saito-space-md), env(safe-area-inset-top, 0px));
    padding-right: 4.5rem;
  }

  .listing-detail .title {
    font-size: var(--font-size-medium);
  }

  .listing-detail .title .title-text,
  .listing-detail .title [data-field='title'] {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .listing-detail > .body {
    padding: var(--saito-space-md);
    padding-bottom: calc(var(--saito-space-md) + env(safe-area-inset-bottom, 0px));
    gap: var(--saito-space-md);
  }

  .listing-detail .media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .listing-detail .thumb {
    width: 4.25rem;
    height: 3.25rem;
  }

  .listing-detail .section + .section:not(.checkout) {
    padding-top: var(--saito-space-md);
  }

  .listing-detail .checkout {
    position: sticky;
    bottom: 0;
    margin-top: var(--saito-space-md);
    padding-top: var(--saito-space-md);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--saito-card) 28%,
      var(--saito-card) 100%
    );
  }

  .listing-detail .note {
    min-height: 9rem;
  }
}
/* Namespace: .nft-picker — large NFT browser workspace.
   Overlay shell owns 90vw×90vh; this panel fills it. */

.saito-overlay:has(> .nft-picker) {
  width: min(90vw, 140rem);
  height: min(90vh, 90dvh);
  max-width: 90vw;
  max-height: 90vh;
}

.nft-picker {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
}

.nft-picker > header {
  flex: 0 0 auto;
  padding: var(--saito-space-lg) var(--saito-space-xl);
  border-bottom: 1px solid var(--saito-border);
}

.nft-picker > header h2 {
  margin: 0 0 var(--saito-space-xs);
  font-size: 2rem;
  font-family: var(--saito-font-medium);
  letter-spacing: -0.01em;
}

.nft-picker > header p {
  margin: 0;
  max-width: 40rem;
  font-size: var(--font-size-medium);
  line-height: 1.45;
  color: var(--saito-muted-foreground);
}

/* Content receives remaining viewport — not the header */
.nft-picker > .body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--saito-space-xl);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Override global .send-nft-list (max-content / 94rem / 85vh) so the grid fills the workspace */
.nft-picker .send-nft-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--saito-space-lg);
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  overflow: visible;
}

.nft-picker .status:not(:empty) {
  flex: 0 0 auto;
}

/* Top-aligned empty copy — do not vertically center in the body */
.nft-picker .empty {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  max-width: none;
}

/* Same bottom instruction strip as .saito-nft-list .nft-list-instructions */
.nft-picker > .nft-list-instructions {
  flex: 0 0 auto;
  padding: var(--saito-space-lg) var(--saito-space-xl);
  border-top: 1px solid var(--saito-border);
}

.nft-picker > .nft-list-instructions[hidden] {
  display: none;
}

.nft-picker .nft-list-instructions .instructions {
  margin: 0;
  opacity: 0.8;
  line-height: 1.5;
  font-size: var(--font-size-medium);
  color: var(--saito-muted-foreground);
}

@media (max-width: 900px) {
  .nft-picker > header,
  .nft-picker > .body {
    padding: var(--saito-space-lg);
  }

  .nft-picker .send-nft-list {
    gap: var(--saito-space-md);
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .saito-overlay:has(> .nft-picker) {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
  }

  .nft-picker > header {
    padding: var(--saito-space-md);
    padding-top: max(var(--saito-space-md), env(safe-area-inset-top, 0px));
  }

  .nft-picker > header h2 {
    font-size: var(--font-size-large);
  }

  .nft-picker > .body {
    padding: var(--saito-space-md);
    padding-bottom: calc(var(--saito-space-lg) + env(safe-area-inset-bottom, 0px));
  }

  .nft-picker > .nft-list-instructions {
    padding: var(--saito-space-md);
    padding-bottom: calc(var(--saito-space-md) + env(safe-area-inset-bottom, 0px));
  }
}
/* Namespace: .store — page composition (layout only; menu hover from .saito-menu-select-subtle) */

:root {
  --saito-empty-state-title-foreground: var(--saito-foreground);
  --saito-empty-state-text-foreground: var(--saito-muted-foreground);
}

.store {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--saito-space-xxl);
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* —— Menu rail (shared item chrome; mode-specific rules below) —— */

.store > .menu {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
  padding-block: var(--saito-space-xs);
  min-width: 0;
}

.store > .menu .list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
  margin: 0;
  padding: 0;
}

/* All category / admin rows share identical base typography */
.store > .menu .item {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--saito-radius-full);
  font-size: var(--font-size-medium);
  line-height: 1.3;
  color: var(--saito-muted-foreground);
}

.store > .menu .item:focus-visible {
  outline: none;
  box-shadow: var(--saito-focus-ring);
}

/* Selected = bold only; hover still from .saito-menu-select-subtle */
.store > .menu .item.active {
  font-family: var(--saito-font-heavy);
}

.store > .menu .divider {
  height: 1px;
  margin: var(--saito-space-md) var(--saito-space-sm);
  background: var(--saito-border);
}

/* Sidebar owns CTA width — stretch to the navigation column / list edges */
.store > .menu.marketplace > .store-list-for-sale {
  width: 100%;
}

/*
 * .store-list-for-sale — OWNED ONLY by the marketplace "List Item for Sale" control.
 * Appearance only. Width comes from .store > .menu (sidebar).
 * Do not reuse. Do not attach saito-button-* or other button utilities.
 */
.store-list-for-sale {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 92px;
  padding: 1.2rem 1.4rem;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  border-radius: 11px;
  box-shadow: none;
  filter: none;
  background: var(--saito-primary);
  color: #ffffff;
  font-family: var(--saito-font);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  transition: none;
}

.store-list-for-sale:hover,
.store-list-for-sale:focus,
.store-list-for-sale:focus-visible,
.store-list-for-sale:active {
  outline: none;
  box-shadow: none;
  filter: none;
  border: none;
  background: var(--saito-primary);
  color: #ffffff;
}

/* —— Main column —— */

.store > .main-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.store > .main-column > .manager {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-md);
  min-width: 0;
}

.store > .main-column > .manager > [data-panel] {
  display: none;
}

.store > .main-column > .manager > [data-panel].is-active {
  display: block;
}

/* Panels participate in .manager flex gap */
.store > .main-column > .manager > [data-panel='browse'].is-active,
.store > .main-column > .manager > [data-panel='my-listings'].is-active,
.store > .main-column > .manager > [data-panel='sales'].is-active {
  display: contents;
}

/* Lightweight purchase lifecycle strip — owns its own spacing when visible */
.store .purchase-status-slot:empty,
.store .purchase-status-slot:has(> [hidden]),
.store .purchase-status[hidden] {
  display: none;
}

.store .purchase-status {
  margin: 0 0 var(--saito-space-lg);
  padding: var(--saito-space-md) var(--saito-space-lg);
  border: 1px solid var(--saito-border);
  border-radius: var(--saito-radius);
  background: var(--saito-card, transparent);
}

.store .purchase-status .body {
  display: flex;
  align-items: center;
  gap: var(--saito-space-md);
  flex-wrap: wrap;
}

.store .purchase-status .saito-spinner {
  width: 2.5rem;
  min-width: 2.5rem;
}

.store .purchase-status .success {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--saito-primary);
  color: var(--saito-white, #fff);
  flex: 0 0 auto;
}

.store .purchase-status .copy {
  flex: 1 1 12rem;
  min-width: 0;
}

.store .purchase-status .title {
  margin: 0;
  font-size: var(--font-size-medium);
  font-family: var(--saito-font-medium);
}

.store .purchase-status .detail {
  margin: 0.2rem 0 0;
  font-size: var(--font-size-small);
  color: var(--saito-muted-foreground);
}

.store .purchase-status .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--saito-space-sm);
  margin-left: auto;
}

.store .storefront-url {
  margin: 0;
  max-width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--saito-border);
  border-radius: var(--saito-radius);
  background: color-mix(in srgb, #ffffff 8%, transparent);
  color: color-mix(in srgb, #ffffff 94%, var(--saito-muted-foreground));
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: var(--font-size-small);
  line-height: 1.4;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
  min-width: 0;
}

.store .storefront-url:hover,
.store .storefront-url:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.store .storefront-url-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--saito-space-sm);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: var(--saito-space-xs) 0;
}

.store .storefront-url-row .saito-icon-button {
  flex: 0 0 auto;
}

.store .storefront-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--saito-space-md);
  padding: var(--saito-space-xl) 0;
  min-height: 12rem;
}

.store .storefront-status[hidden] {
  display: none;
}

.store .storefront-status .saito-spinner {
  width: 3.5rem;
  min-width: 3.5rem;
}

.store .storefront-status p {
  margin: 0;
  font-size: var(--font-size-medium);
  color: var(--saito-muted-foreground);
}

/* Post-listing success — neon green, not primary orange */
.store .listing-success {
  position: relative;
  margin: 0 0 var(--saito-space-lg);
  padding: var(--saito-space-lg) 3.5rem var(--saito-space-lg) var(--saito-space-lg);
  border: 1px solid var(--saito-green);
  border-radius: var(--saito-radius);
  background: color-mix(in srgb, var(--saito-green) 14%, transparent);
}

.store .listing-success .close {
  position: absolute;
  top: var(--saito-space-sm);
  right: var(--saito-space-sm);
}

.store .listing-success .title {
  margin: 0;
  font-size: var(--font-size-large);
  font-family: var(--saito-font-heavy);
  line-height: 1.3;
  color: var(--saito-foreground);
}

.store .listing-success .body {
  margin: var(--saito-space-sm) 0 0;
  font-size: var(--font-size-medium);
  line-height: 1.45;
  color: color-mix(in srgb, #ffffff 88%, var(--saito-muted-foreground));
}

/* Seller admin shell — top padding aligns with first sidebar nav item */
.store .storefront-admin {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: var(--saito-space-xs);
  min-width: 0;
}

.store .admin-denied {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  padding: var(--saito-space-xxl) var(--saito-space-lg);
  text-align: center;
}

.store .admin-denied .body {
  margin: 0;
  max-width: 28rem;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--saito-foreground);
}

/* Seller dashboard welcome (main column only — not .menu.dashboard) */
.store .seller-home {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-md);
  padding: 0 0 var(--saito-space-xl);
  margin: 0 0 var(--saito-space-lg);
  border-bottom: 1px solid var(--saito-border);
}

.store .seller-home .title {
  margin: 0;
  font-size: var(--font-size-large);
  font-family: var(--saito-font-heavy);
  line-height: 1.25;
  color: var(--saito-foreground);
}

.store .seller-home .body {
  margin: 0;
  max-width: 48rem;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--saito-muted-foreground);
}

.store .seller-home .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--saito-space-sm);
}

.store .seller-home .actions .saito-button-primary {
  margin: 0;
  min-width: 0;
}

/* Public storefront header */
.store .hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 0 var(--saito-space-sm);
  border-bottom: 1px solid var(--saito-border);
}

.store .hero .toolbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--saito-space-md);
  width: 100%;
  min-width: 0;
}

.store .hero .title {
  margin: 0;
  min-width: 0;
  font-size: var(--font-size-large);
  font-family: var(--saito-font-medium);
  font-weight: normal;
  line-height: 1.25;
  color: var(--saito-foreground);
}

.store .hero .description {
  margin: 0.45rem 0 0;
  max-width: 72rem;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.4;
  color: var(--saito-muted-foreground);
}

.store .sales-panel {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-md);
  min-width: 0;
}

.store .sales-panel > .title {
  margin: 0;
  font-size: var(--font-size-large);
  font-family: var(--saito-font-heavy);
  line-height: 1.25;
  color: var(--saito-foreground);
}

.store .sales-panel .sales-content {
  min-width: 0;
}

.store .sales-panel .body {
  margin: 0;
  max-width: 40rem;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--saito-muted-foreground);
}

.store .catalog {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-lg);
  min-width: 0;
}

.store .catalog-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--saito-space-md);
  padding: var(--saito-space-xl) 0;
  min-height: 10rem;
}

.store .catalog-status[hidden] {
  display: none;
}

.store .catalog-status .saito-spinner {
  width: 3.5rem;
  min-width: 3.5rem;
}

.store .catalog-status p {
  margin: 0;
  font-size: var(--font-size-medium);
  color: var(--saito-muted-foreground);
}

.store .catalog-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--saito-space-sm);
  padding-top: var(--saito-space-sm);
}

.store .catalog-footer[hidden] {
  display: none;
}

.store .catalog-info {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: 1.4;
  color: var(--saito-muted-foreground);
  opacity: 0.85;
}

.store .catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--saito-space-sm);
  width: 100%;
}

.store .catalog-pagination .pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.store .catalog-pagination .nav-btn,
.store .catalog-pagination .page-btn {
  appearance: none;
  border: 1px solid var(--saito-border);
  background: transparent;
  color: var(--saito-muted-foreground);
  font: inherit;
  font-size: var(--font-size-small);
  line-height: 1;
  min-height: 2.25rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--saito-radius);
  cursor: pointer;
}

.store .catalog-pagination .page-btn.is-active {
  border-color: var(--saito-primary);
  color: var(--saito-foreground);
  font-family: var(--saito-font-medium);
}

.store .catalog-pagination .nav-btn:disabled,
.store .catalog-pagination .page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.store .catalog-pagination .nav-btn:focus-visible,
.store .catalog-pagination .page-btn:focus-visible {
  outline: none;
  box-shadow: var(--saito-focus-ring);
}

.store .catalog-empty {
  min-height: 14rem;
}

/* Empty panels — Saito empty-state tokens */
.store .empty,
.nft-picker .empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 22rem;
  padding: var(--saito-space-xxl) 0;
  max-width: 28rem;
}

.store .empty h2,
.store .empty h3,
.nft-picker .empty h2,
.nft-picker .empty h3 {
  margin: 0 0 var(--saito-space-sm);
  font-size: var(--font-size-large);
  font-family: var(--saito-font-medium);
  color: var(--saito-empty-state-title-foreground);
}

.store .empty p,
.nft-picker .empty p {
  margin: 0;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--saito-empty-state-text-foreground);
}

.store .empty .saito-button-primary {
  margin-top: var(--saito-space-lg);
  min-height: 2.75rem;
}

@media (max-width: 900px) {
  .store {
    grid-template-columns: 1fr;
    gap: var(--saito-space-xl);
  }

  .store > .menu {
    position: static;
  }

  .store > .menu .list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--saito-space-xs);
  }

  .store > .menu .divider {
    flex: 1 0 100%;
    margin: var(--saito-space-sm) 0;
  }

  .store > .main-column > .manager {
    gap: var(--saito-space-md);
  }

  .store .purchase-status .actions {
    margin-left: 0;
    width: 100%;
  }

  .store .purchase-status .actions .saito-button-primary,
  .store .purchase-status .actions .saito-button-secondary {
    flex: 1 1 auto;
  }

  .store .hero .toolbar-row {
    flex-wrap: wrap;
  }

  .store .seller-home .actions .saito-button-primary {
    flex: 1 1 auto;
  }

  .store .storefront-url {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: unset;
  }

  .store .empty,
  .nft-picker .empty {
    min-height: 16rem;
    padding: var(--saito-space-xl) 0;
  }
}

@media (max-width: 600px) {
  .store {
    gap: var(--saito-space-lg);
  }

  .store > .main-column > .manager {
    gap: var(--saito-space-sm);
  }

  .store .catalog {
    gap: var(--saito-space-md);
  }

  .store .empty,
  .nft-picker .empty {
    min-height: 12rem;
    padding: var(--saito-space-lg) 0;
    max-width: none;
  }
}
/* Namespace: .teaser / .teasers — listing card + grid on Saito card tokens */

.teasers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--saito-space-xl) var(--saito-space-lg);
  width: 100%;
  min-width: 0;
}

.teaser {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--saito-radius);
  background: var(--saito-card);
  border: 1px solid var(--saito-border);
  box-shadow: var(--saito-elevation-0);
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.teaser:focus-visible {
  outline: none;
  box-shadow: var(--saito-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .teaser:hover {
    background-color: color-mix(in srgb, var(--saito-card) 86%, var(--saito-accent));
    border-color: var(--saito-border);
    box-shadow: var(--saito-elevation-0);
  }
}

.teaser .media {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--saito-muted);
  background-size: cover;
  background-position: center;
}

.teaser .media-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--saito-space-md);
}

.teaser .badge {
  position: absolute;
  top: var(--saito-space-sm);
  left: var(--saito-space-sm);
  z-index: 1;
  max-width: calc(100% - 4rem);
  padding: var(--saito-space-xs) var(--saito-space-sm);
  border-radius: var(--saito-radius-full);
  background: color-mix(in srgb, var(--saito-background) 82%, transparent);
  backdrop-filter: blur(8px);
  color: var(--saito-foreground);
  font-size: var(--font-size-tiny);
  font-family: var(--saito-font-medium);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teaser .saito-identicon {
  position: absolute;
  right: var(--saito-space-sm);
  bottom: var(--saito-space-sm);
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--saito-background) 55%, transparent);
  object-fit: cover;
}

.teaser .loader {
  position: absolute;
  right: var(--saito-space-sm);
  top: var(--saito-space-sm);
  font-size: var(--font-size-tiny);
  color: var(--saito-foreground);
  opacity: 0;
  pointer-events: none;
}

.teaser .media.loading .loader {
  opacity: 0.75;
}

.teaser .info {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
  padding: var(--saito-space-md) var(--saito-space-md) var(--saito-space-lg);
  min-width: 0;
}

.teaser .title {
  margin: 0;
  font-size: var(--font-size-medium);
  font-family: var(--saito-font-medium);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teaser .price {
  margin: 0;
  font-size: var(--font-size-tiny);
  color: var(--saito-primary);
  font-family: var(--saito-font-medium);
}

.teaser .seller {
  margin: 0;
  font-size: var(--font-size-tiny);
  color: var(--saito-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .teasers {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--saito-space-lg);
  }
}

@media (max-width: 600px) {
  .teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--saito-space-md);
  }

  .teaser .info {
    padding: var(--saito-space-sm) var(--saito-space-sm) var(--saito-space-md);
    gap: var(--saito-space-xs);
  }

  .teaser .title {
    font-size: var(--font-size-tiny);
  }

  .teaser .badge {
    padding: 0.45rem 0.65rem;
    font-size: 1.05rem;
  }
}
/* Namespace: .purchase — purchase progress dialog */

.saito-container.store-purchase-modal-open {
  pointer-events: none;
}

/* Shell: center dialog; pointer-events so backdrop still receives clicks */
.saito-overlay.store-purchase-overlay-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--saito-space-md);
  box-sizing: border-box;
  pointer-events: none;
}

.saito-overlay.store-purchase-overlay-shell > .purchase {
  pointer-events: auto;
  width: min(92vw, 36rem);
  max-width: 100%;
  max-height: min(90dvh, 40rem);
  overflow: auto;
  padding: var(--saito-space-xxl) var(--saito-space-xl);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.purchase .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--saito-space-md);
  text-align: center;
  min-width: 0;
}

.purchase .title {
  margin: 0;
  font-size: 2rem;
  font-family: var(--saito-font-medium);
  letter-spacing: -0.01em;
}

.purchase .lead,
.purchase .subtitle {
  margin: 0;
  max-width: 28rem;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--saito-muted-foreground);
  overflow-wrap: anywhere;
}

.purchase .subtitle {
  min-height: 3em;
}

.purchase .saito-spinner {
  width: 4rem;
  min-width: 4rem;
  margin-bottom: var(--saito-space-sm);
}

.purchase .success {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--saito-space-xs);
  border-radius: 50%;
  background: color-mix(in srgb, var(--saito-primary) 18%, transparent);
  color: var(--saito-primary);
  font-size: var(--font-size-large);
}

.purchase .stack > .saito-button-primary {
  margin-top: var(--saito-space-lg);
  min-width: 10rem;
  min-height: 2.75rem;
}

.purchase .stack > .saito-button-secondary {
  min-width: 10rem;
  min-height: 2.75rem;
}

.saito-overlay.store-purchase-overlay-shell > .saito-overlay-closebox {
  pointer-events: auto;
}

.purchase.fulfilling .subtitle {
  min-height: 1.5em;
}

/* Dialog surface on mobile: .retain-surface on .purchase */

@media (max-width: 600px) {
  .saito-overlay.store-purchase-overlay-shell {
    padding: max(var(--saito-space-md), env(safe-area-inset-top, 0px))
      max(var(--saito-space-md), env(safe-area-inset-right, 0px))
      max(var(--saito-space-md), env(safe-area-inset-bottom, 0px))
      max(var(--saito-space-md), env(safe-area-inset-left, 0px));
    align-items: flex-end;
  }

  .saito-overlay.store-purchase-overlay-shell > .purchase {
    width: 100%;
    max-height: min(88dvh, 40rem);
    padding: var(--saito-space-xl) var(--saito-space-lg);
    border-radius: var(--saito-radius-lg) var(--saito-radius-lg) 0 0;
  }

  .purchase .title {
    font-size: var(--font-size-large);
  }

  .purchase .stack > .saito-button-primary {
    width: 100%;
    min-width: 0;
  }

  .purchase .stack > .saito-button-secondary {
    width: 100%;
    min-width: 0;
  }
}