/**
 * Dood Labs — mobile layout (375px+). Linked from key marketplace pages.
 */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-size: 15px;
}

.hint,
.sub,
.k,
.nft-meta,
.by,
.disc-card .by {
  font-size: max(0.875rem, 14px);
}

/* Action rows */
.actions,
.disc-actions,
.form-actions,
.links-row,
.focus-actions,
.market-actions,
.market-grid .market-actions,
.chip-row,
.filter-bar,
.controlRow,
.topLine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

@media (max-width: 480px) {
  .btn,
  .btn.secondary,
  .btn.danger,
  .btn-ghost,
  button.btn,
  a.btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    justify-content: center;
  }

  .lab-global-nav .btn-ghost,
  .lab-global-nav a.btn-ghost,
  .lab-global-nav button.btn-ghost,
  #addrPill,
  #navNotificationBell {
    width: auto;
    min-width: 44px;
  }

  .form-actions .btn,
  .form-actions .btn.secondary,
  .links-row .btn,
  .links-row a,
  .disc-actions .btn,
  .disc-actions a,
  .market-actions .btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* NFT / collection images */
img,
.cov,
.nft-hero-img,
.mediaHero img,
.tile .thumb img,
.listing-card img,
.focus-nft img,
.collection-cover,
.modal-item img,
.avatar {
  max-width: 100%;
}

.disc-card .cov,
.tile .thumb img,
.listing-card img,
.nft-flat img,
.sk-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
}

.nft-hero-img {
  width: 100%;
  max-width: 100%;
  max-height: min(72vh, 520px);
  height: auto;
  object-fit: contain;
}

.mediaHero img {
  width: 100%;
  min-height: 200px;
  max-height: 56vh;
  object-fit: cover;
}

/* Price breakdown — stack on narrow screens */
@media (max-width: 600px) {
  .priceBox,
  .price-card,
  .detail-row,
  .kv {
    flex-direction: column;
    align-items: stretch;
  }

  .priceBox > * {
    width: 100%;
  }

  .price-card .line {
    width: 100%;
  }
}

/* Collection / NFT grids */
@media (max-width: 600px) {
  .grid,
  .disc-grid,
  .skeletonGrid,
  .listings-grid,
  .nft-flat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  .grid,
  .disc-grid,
  .skeletonGrid,
  .listings-grid,
  .nft-flat-grid {
    grid-template-columns: 1fr !important;
  }

  .collection-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Xaman signing overlay */
#pageXamanOverlay {
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#pageXamanOverlay .page-xaman-panel {
  width: min(100%, 360px);
  max-height: min(92dvh, 100%);
  overflow-y: auto;
  margin: auto;
  box-sizing: border-box;
}

#pageXamanQrImg {
  width: min(80vw, 280px) !important;
  height: auto !important;
  max-width: 80vw;
  aspect-ratio: 1;
  object-fit: contain;
}

#pageXamanOverlay .page-xaman-cancel {
  min-height: 44px;
  width: 100%;
  max-width: 280px;
}

/* Global header nav — horizontal scroll */
.lab-global-nav,
.appbar .nav {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: min(100vw, 100%);
  justify-content: flex-start;
  scrollbar-width: none;
  gap: 8px;
  padding-bottom: 2px;
}

.lab-global-nav::-webkit-scrollbar,
.appbar .nav::-webkit-scrollbar {
  display: none;
}

.lab-global-nav > *,
.appbar .nav > * {
  flex: 0 0 auto;
}

.appbar .row {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.appbar .brand {
  flex: 1 1 auto;
  min-width: 0;
}

.wrap,
main.wrap {
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}