/* 2026-10: compact markets and explicit mobile navigation. */
:root { --zj-refine-ease: cubic-bezier(.16,1,.3,1); }

/* Buyer information comes first; preserve every original card action. */
.market-presence #market .market-heading {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 8px 24px; padding: 18px 0 14px;
}
.market-presence #market .market-heading h1 { font-size: 26px; }
.market-presence #market .market-heading .market-intro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 5px; font-size: 13px; line-height: 1.6;
}
.market-intro-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border: 1px solid #dce0e7; border-radius: 5px;
  color: #666d78; background: #fff; white-space: nowrap; font-size: 11px;
}
.market-intro-toggle svg { width: 12px; height: 12px; transition: transform 180ms ease-out; }
.market-intro-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.market-presence #marketIntro {
  grid-column: 1 / -1; padding: 12px 16px; border: 1px solid #e0e4e9;
  border-radius: 7px; background: #fff; color: #626a76;
}
.market-presence #marketIntro p { margin: 0; font-size: 12px; }
.market-presence #marketIntro .mini-flow { display: flex; margin-top: 8px; }
.market-presence #market .market-shortcuts { margin: 0; gap: 8px; }
.market-presence #market .market-shortcuts .button { min-height: 40px; padding: 8px 16px; }
.market-presence .market-heading:has(#buyPublish:not([hidden])) .market-shortcuts { display: none; }
.market-presence .profession-row { min-height: 72px; }
.market-presence #professionTabs { padding-block: 5px; }
.market-presence .profession-tab { min-height: 58px; gap: 5px; }
.market-presence .filter-line { min-height: 42px; }
.market-presence .filter-details { padding-block: 6px; }
.market-presence .catalog-heading { min-height: 54px; padding-block: 8px; }
.market-presence #grid:not(.is-list) .product-image { height: 150px; background: #f0f2f5; }
.market-presence #grid .product-image > img { object-fit: contain; object-position: center; }
.market-presence #grid:not(.is-list) .product-content { padding: 13px 14px 12px; gap: 0; }
.market-presence #grid:not(.is-list) .product-name {
  order: 0; height: auto; min-height: 26px; max-height: 48px;
  line-height: 1.5; font-size: 15px; margin: 0;
}
.market-presence #grid:not(.is-list) .product-price { order: 1; margin-top: 7px; min-height: 34px; }
.market-presence #grid:not(.is-list) .product-kinds {
  order: 2; margin: 9px 0 0; gap: 8px; min-height: 25px;
}
.market-presence #grid:not(.is-list) .product-tags { order: 3; margin-top: 7px; min-height: 20px; }
.market-presence #grid:not(.is-list) .product-bottom {
  order: 4; margin-top: 9px; padding-top: 7px; min-height: 36px;
}
.market-presence #grid:not(.is-list) .product-record {
  display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 10px;
}
.market-presence #grid:not(.is-list) .product-number { font-size: 10px; }
.market-presence #grid:not(.is-list) .product-trade { order: 5; margin-top: 8px; min-height: 38px; }
.market-presence #grid .is-sold .product-name { color: #656d79; }
.market-presence #detailBody .detail-photo { background: #f0f2f5; }
.market-presence #detailBody .detail-photo img { object-fit: contain; object-position: center; }

/* A complete view of the site's existing navigation, with native dialog focus. */
.zj-nav-shell { display: contents; }
.zj-nav-more, .zj-profession-more { display: none; }
.zj-directory-dialog {
  box-sizing: border-box; width: 580px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px); margin: auto; padding: 0;
  overflow: auto; border: 1px solid #dce0e7; border-radius: 12px;
  color: #222630; background: white; box-shadow: 0 20px 80px #22263024;
  font: 14px/1.5 "Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}
.zj-directory-dialog:not([open]) { display: none; }
.zj-directory-dialog::backdrop { background: #1a22315c; }
.zj-directory-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px; gap: 12px;
}
.zj-directory-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.zj-directory-close {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border: 1px solid #e0e4e9; border-radius: 7px; background: white; color: #626a76;
  cursor: pointer;
}
.zj-directory-close svg { width: 18px; height: 18px; }
.zj-directory-copy { margin: 0; padding: 0 20px 15px; color: #737b87; font-size: 12px; }
.zj-directory-grid {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px;
  padding: 0 20px 22px;
}
.zj-directory-item {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; min-width: 0; min-height: 92px; padding: 12px 5px;
  border: 1px solid #e5e8ed; border-radius: 9px; background: #fafbfc;
  color: #39404c; text-decoration: none; cursor: pointer; font: inherit;
  transition: background-color 160ms ease-out,border-color 160ms ease-out,transform 160ms ease-out;
}
.zj-directory-item > svg { width: 26px; height: 26px; }
.zj-directory-item > img { width: 27px; height: 27px; object-fit: contain; }
.zj-directory-item[aria-current="page"], .zj-directory-item[aria-pressed="true"] {
  color: #a4420f; border-color: #e5b28f; background: #fff2e7;
}
.zj-directory-item:hover { background: #fff5ed; border-color: #e5b28f; }
.zj-directory-item:focus-visible, .zj-directory-close:focus-visible,
.zj-nav-more:focus-visible, .zj-profession-more:focus-visible {
  outline: 2px solid #a4420f; outline-offset: 3px;
}
.zj-directory-item:active { transform: scale(.97); }
.zj-directory-dialog .zj-profession-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.zj-profession-grid .zj-directory-item { font-size: 12px; min-height: 82px; }

/* The quote stays visible; the full historical chart is available on demand. */
.stone-presence #stone-market { padding-top: 24px; }
.stone-presence .stone-market-heading { margin-bottom: 18px; }
.stone-presence .market-filter { padding: 14px 18px; margin-bottom: 16px; }
.stone-presence .market-guide { margin-top: 10px; padding-top: 9px; }
.stone-presence #price-history { padding: 16px 22px; margin-bottom: 22px; }
.stone-presence .history-heading { border: 0; padding-bottom: 4px; }
.stone-presence .history-heading .section-title { font-size: 16px; }
.stone-presence .history-groups { margin: 2px 0 4px; }
.stone-presence .history-groups button { min-height: 34px; padding: 5px 10px; font-size: 12px; }
.stone-presence #history-disclosure > summary { gap: 16px; padding-block: 4px; }
.stone-presence #history-current { margin: 0; padding: 4px 0; background: none; font-size: 13px; }
.stone-presence .history-toggle-label {
  border: 1px solid #dce0e7; border-radius: 6px; padding: 7px 10px;
  min-height: 36px; background: white; color: #626a76; font-size: 12px;
}
.history-sparkline { margin-left: auto; flex: 0 0 116px; color: #ad4b19; }
.history-sparkline svg { display: block; width: 116px; height: 32px; overflow: visible; }
.history-sparkline-label { display: block; text-align: center; color: #89909b; font-size: 10px; line-height: 1.4; }
.history-disclosure[open] .history-sparkline { display: none; }
.stone-presence #history-content { margin-top: 14px; border-top: 1px solid #e8ebef; padding-top: 14px; }
.stone-presence .history-note { font-size: 11px; }

/* Keep images in place while the gallery is reading its next result set. */
.face-card-skeleton { overflow: hidden; border: 1px solid #e2e6ec; border-radius: 8px; background: #fff; }
.face-skeleton-image { aspect-ratio: 3 / 4; background: #e9edf2; }
.face-skeleton-copy { display: grid; gap: 10px; padding: 14px; }
.face-skeleton-copy span { height: 10px; width: 74%; border-radius: 3px; background: #e9edf2; }
.face-skeleton-copy span:first-child { height: 14px; width: 52%; }
.face-card-cover > img { object-position: 50% 12%; }
.face-site .face-list-heading { margin-bottom: 16px; }
.lz-site #lzListView .lz-heading { padding-block: 18px 15px; }
.lz-site #lzListView .lz-heading .lz-stats { color: #78818d; font-size: 12px; }
.lz-site .lz-row-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

html[data-motion="full"] .face-card-skeleton { animation: zj-skeleton-breathe 1.4s ease-in-out infinite alternate; }
@keyframes zj-skeleton-breathe { from { opacity: .65; } to { opacity: 1; } }
@media (hover:hover) and (pointer:fine) {
  html[data-motion="full"] .market-presence #grid .product-card {
    transition: transform 180ms var(--zj-refine-ease),border-color 180ms ease-out,box-shadow 220ms ease-out !important;
  }
  html[data-motion="full"] .market-presence #grid .product-card:not(.is-sold):hover { transform: translateY(-2px); }
  html[data-motion="full"] .market-presence #grid .product-card:not(.is-sold):hover .product-image > img { transform: scale(1.025); }
}
@media (max-width:700px) {
  .zj-nav-shell { display: block; width: var(--zj-shell-width,calc(100% - 28px)); margin: 0 auto; position: relative; }
  html header .zj-nav-shell > nav.main-nav:has([data-site-nav-item]),
  html header .zj-nav-shell > nav.main-nav[data-site-navigation] {
    width: calc(100% - 58px) !important; margin: 0 !important;
  }
  html header .zj-nav-shell .header-search.zj-mobile-search { width: 100% !important; }
  .zj-nav-more {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: absolute; right: 0; top: 3px; gap: 2px; width: 48px; min-height: 44px;
    padding: 3px; border: 1px solid #e1e5eb; border-radius: 7px; background: #fff;
    color: #626a76; font-size: 10px; cursor: pointer;
  }
  .zj-nav-more svg { width: 17px; height: 17px; }
  .zj-directory-dialog { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 88dvh; border-radius: 16px 16px 0 0; }
  .zj-directory-grid { gap: 9px; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
  .zj-directory-item { min-height: 88px; font-size: 13px; }
  .zj-directory-close { width: 40px; height: 40px; flex-basis: 40px; }
  .market-presence #market .market-heading { padding: 12px 0 10px; display: block; }
  .market-presence #market .market-heading h1 { font-size: 21px; }
  .market-presence #market .market-heading .market-intro { gap: 3px 7px; font-size: 12px; margin-top: 4px; }
  .market-intro-toggle { font-size: 10px; padding: 3px 6px; }
  .market-presence #market .market-shortcuts { display: none; }
  .market-presence #marketIntro { margin-top: 10px; padding: 11px 12px; }
  .market-presence .profession-row { min-height: 68px; gap: 7px; }
  .market-presence #professionTabs { flex: 1; min-width: 0; padding-block: 4px; }
  .market-presence .profession-tab { min-height: 56px; min-width: 51px; padding: 4px; }
  .market-presence .profession-tab img,.market-presence .profession-tab svg { width: 23px; height: 23px; }
  .zj-profession-more {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    flex: 0 0 42px; gap: 5px; min-height: 48px; padding: 3px;
    border: 1px solid #e3e6eb; border-radius: 6px; background: #fff; color: #6c7480; font-size: 10px;
  }
  .zj-profession-more svg { width: 18px; height: 18px; }
  .market-presence .catalog-heading { min-height: 52px; padding-block: 4px; }
  .market-presence .catalog-controls { gap: 4px; }
  .market-presence .catalog-controls select { width: 108px; max-width: 108px; }
  .market-presence #grid:not(.is-list) .product-image { height: 124px; }
  .market-presence #grid:not(.is-list) .product-content { padding: 9px 9px 8px; }
  .market-presence #grid:not(.is-list) .product-name { font-size: 14px; min-height: 22px; max-height: 42px; line-height: 1.5; }
  .market-presence #grid:not(.is-list) .product-price { margin-top: 5px; min-height: 29px; gap: 3px; }
  .market-presence #grid .product-price .num { font-size: 23px; line-height: 1.3; letter-spacing: -.6px; }
  .market-presence #grid .product-price .unit { font-size: 10px; }
  .market-presence #grid:not(.is-list) .product-kinds { margin-top: 7px; gap: 5px; min-height: 22px; font-size: 10px; }
  .market-presence #grid .zj-server-caption { display: none; }
  .market-presence #grid .zj-server-badge { padding: 2px 5px; min-height: 22px; font-size: 10px; }
  .market-presence #grid:not(.is-list) .product-tags { margin-top: 6px; gap: 3px; font-size: 10px; }
  .market-presence #grid:not(.is-list) .product-bottom { margin-top: 7px; padding-top: 4px; min-height: 34px; }
  .market-presence #grid:not(.is-list) .product-record { gap: 1px; font-size: 10px; }
  .market-presence #grid:not(.is-list) .product-record time { width: 100%; }
  .market-presence #grid:not(.is-list) .product-trade { min-height: 40px; margin-top: 5px; font-size: 12px; }
  .market-presence #grid .favorite-btn { min-height: 40px; min-width: 36px; }
  .stone-presence #stone-market { padding-top: 16px; }
  .stone-presence .stone-market-heading { margin-bottom: 14px; }
  .stone-presence .stone-market-heading .page-title { font-size: 24px; }
  .stone-presence .stone-market-heading .muted { font-size: 12px; line-height: 1.6; }
  .stone-presence .market-filter { padding: 12px; margin-bottom: 12px; }
  .stone-presence #filter-form [data-server-field]:has(select:disabled) { display: none; }
  .stone-presence .market-guide { margin-top: 8px; padding-top: 8px; }
  .stone-presence #price-history { padding: 12px 13px; margin-bottom: 17px; }
  .stone-presence .history-heading .section-title { font-size: 14px; }
  .stone-presence .history-groups { gap: 5px; margin: 3px 0; }
  .stone-presence .history-groups button { min-height: 34px; font-size: 11px; padding: 5px 8px; }
  .stone-presence #history-disclosure > summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
  .stone-presence #history-current { grid-column: 1; font-size: 12px; line-height: 1.6; padding: 4px 0; }
  .stone-presence .history-toggle-label { grid-column: 2; grid-row: 1; padding: 6px 7px; font-size: 11px; }
  .history-sparkline { grid-column: 1; grid-row: 2; margin: 2px 0 0; display: flex; gap: 10px; align-items: center; }
  .history-sparkline svg { width: 100px; height: 23px; }
  .history-sparkline-label { font-size: 10px; }
  .stone-presence .market-list-heading { margin-bottom: 10px; }
  .face-site #faceListView > .face-list-heading { margin-top: 15px; }
  .face-site .face-skeleton-copy { padding: 11px; }
  .face-site .face-filter-panel { padding: 12px; }
  .face-site .face-list-heading h1 { font-size: 22px; }
  .lz-site #lzListView .lz-heading { padding-block: 15px 12px; }
  .lz-site #lzListView .lz-heading h1 { font-size: 23px; }
  .lz-site #lzListView .lz-heading .lz-stats { margin-top: 6px; }
  .lz-site .lz-filter-top, .lz-site .lz-categories { padding: 9px 11px; }
  .lz-site .lz-toolbar { margin-top: 12px; }
}
@media(max-width:370px) {
  .market-presence #grid:not(.is-list) .product-image { height: 108px; }
  .market-presence #grid .product-price .num { font-size: 20px; }
  .zj-directory-grid { padding-inline: 15px; gap: 7px; }
  .zj-directory-dialog .zj-profession-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

.zj-directory-item[data-entry-icon-ready]::before { flex:none; width:26px; height:26px; margin:0; }
.market-presence #professionTabs .profession-tab { flex:0 0 58px; }
.market-presence #professionTabs .profession-tab span { white-space:nowrap; }
.market-presence #professionTabs .profession-tab:first-child { flex-basis:66px; }
body .zj-nav-more { padding:3px; border:1px solid #e1e5eb; border-radius:7px; background:#fff; color:#626a76; font-size:10px; }
body .zj-directory-close { padding:0; border:1px solid #e0e4e9; border-radius:7px; background:white; }
body .zj-directory-item { border:1px solid #e5e8ed; border-radius:9px; background:#fafbfc; }
body .zj-directory-item[aria-current="page"],body .zj-directory-item[aria-pressed="true"] { border-color:#e5b28f; background:#fff2e7; }

@media(max-width:700px) {
  .stone-presence .history-heading { align-items:center; gap:8px; }
  .stone-presence .history-heading .history-sparkline { position:static; display:block; margin:0 0 0 auto; flex:0 0 90px; }
  .stone-presence .history-heading .history-sparkline svg { width:90px; height:23px; }
  .stone-presence .history-heading .history-sparkline-label { display:none; }
}