/* Artwork fills the trading row on desktop and keeps its natural height on mobile. */
.dd-expanded-nft {
  display:grid;
  grid-template-columns:clamp(220px,28%,300px) minmax(0,1fr);
  gap:24px;
  align-items:start;
  text-align:left;
}
.dd-expanded-nft .nft-detail-overview { min-width:0; }
.dd-expanded-nft :is(.nft-detail-image-col,.ext-detail-image,.nft-detail-market-col,.ext-detail-market) { grid-column:auto; grid-row:auto; order:initial; min-width:0; }
.dd-expanded-nft :is(.nft-detail-image-col,.ext-detail-image) { display:block; width:100%; min-height:0; padding:0; }
.dd-expanded-nft .dd-nft-artwork { position:relative; isolation:isolate; display:block; margin:0; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--dd-bg-2,#191943); box-shadow:0 8px 24px #05051b38; }
.dd-expanded-nft .dd-nft-artwork { aspect-ratio:var(--dd-artwork-ratio,1); }
.dd-nft-artwork [data-nft-media] { display:block; height:100%; }
.dd-expanded-nft .dd-nft-artwork :is(img,video) { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; max-height:none; aspect-ratio:auto; object-fit:contain; border-radius:0; }
.dd-expanded-nft .dd-nft-artwork :is(img,video)[hidden] { display:none; }
.dd-nft-artwork:not([data-artwork-state=ready]) img { opacity:0; }
.dd-artwork-unavailable { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:24px; color:var(--dd-muted,#d3d7e7); font:400 14px/1.5 Barlow,sans-serif; text-align:center; }
.dd-nft-artwork::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,#fff0 35%,#ffffff26 48%,#ffffff0d 55%,transparent 70%); opacity:0; transform:translateX(-120%); }
.is-artwork-loading :is(.row-chevron,.ext-chevron) { border-color:var(--dd-lilac,#c6b6ff); }
.community-expand.is-artwork-loading { position:relative; color:transparent; }
.community-expand.is-artwork-loading::after { content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; border:2px solid var(--dd-lilac,#c6b6ff); border-left-color:transparent; border-radius:50%; }

/* Metadata opens in its own dialog, so rows never grow to fit trait lists. */
.dd-expanded-nft .nft-detail-metadata { flex:0 1 auto; min-width:0; margin:0; border:0; }
.dd-expanded-nft [data-nft-details] { display:flex; align-items:center; justify-content:center; width:100%; cursor:pointer; }

/* Trading uses the available width instead of a tall stack of full-width buttons. */
.dd-expanded-nft :is(.nft-detail-market-col,.ext-detail-market) { container:expanded-trading / inline-size; width:100%; padding:18px; border:1px solid var(--dd-border,#333353); border-radius:10px; background:var(--dd-bg,#0d0d2d); }
.dd-expanded-nft :is(.nft-marketplace-panel,.ext-market) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 10px; min-width:0; }
.dd-expanded-nft :is(.marketplace-panel-top,.ext-market>div:first-child) { grid-column:1/-1; min-width:0; }
.dd-expanded-nft .marketplace-panel-top { gap:6px; }
.dd-expanded-nft .marketplace-panel-label,.dd-expanded-nft .ext-kicker { font:400 12px/1.4 Barlow,sans-serif; color:var(--dd-muted,#d3d7e7); letter-spacing:0; text-transform:none; }
.dd-expanded-nft :is(.listingBigPrice,.ext-big-price) { margin:0; gap:8px; font:600 30px/1.2 Barlow,sans-serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.dd-expanded-nft .ext-big-price { margin-top:6px; }
.dd-expanded-nft .ext-big-price img { width:24px; height:24px; }
.dd-expanded-nft .ext-market :is(h4,p) { margin-top:6px; }
.dd-expanded-nft :is(.action-row,.ext-market-actions) { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; margin:0; align-self:start; }
.dd-expanded-nft :is(.action-row,.ext-market-actions)>button { flex:1 1 120px; width:auto!important; min-height:44px; padding:9px 12px; font-size:14px; }
.dd-expanded-nft .nft-marketplace-panel>.dd-listing-share-panel,.dd-expanded-nft .ext-market>.dd-listing-share-panel { grid-column:2; margin:0; padding:0; border:0; align-self:start; }
.dd-expanded-nft .dd-listing-share { min-height:44px; padding:9px 12px; font-size:14px; }
.dd-expanded-nft :is(.nft-marketplace-panel,.ext-market):not(:has(>.dd-listing-share-panel))>* { grid-column:1/-1; }
.dd-expanded-nft :is(.action-row,.ext-market-actions):has(>button:nth-child(2)) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-column:1/-1; }
.dd-expanded-nft :is(.action-row,.ext-market-actions):has(>button:nth-child(2))>button { min-width:0; padding-inline:8px; font-size:13px; }
.dd-expanded-nft .action-row [data-action="cancel-listing"] { background:transparent; border-color:var(--dd-border-strong,#62627c); box-shadow:none; }
.dd-expanded-nft :is(.action-row,.ext-market-actions):has(>button:nth-child(2))+.dd-listing-share-panel { grid-column:1/-1; }
.dd-expanded-nft .dd-offers.dd-offers-inline { margin-top:16px; padding-top:16px; }
.dd-expanded-nft .dd-offers .dd-offers-header h3 { font-size:22px; }
.dd-expanded-nft .dd-offers-header,.dd-expanded-nft .dd-offer-header-actions { gap:8px; }
.dd-expanded-nft .dd-offers-header .dd-offer-refresh { min-height:44px; padding-inline:4px; font-weight:400; }
.dd-expanded-nft .dd-offers-header [data-make] { min-height:44px; padding-inline:10px; font-size:13px; }
.dd-expanded-nft .dd-offers .dd-offers-status { margin-top:8px; font-size:13px; }
.dd-expanded-nft .dd-offers .dd-offers-best { margin-top:12px; gap:8px; }
.dd-expanded-nft .dd-offers-best strong { font-size:22px; }
.dd-expanded-nft :is(.dd-nft-utilities,.nft-detail-market-col>.nft-detail-actions) { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid var(--dd-border,#333353); }
.dd-expanded-nft .nft-detail-actions-inner { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; margin:0; width:100%; }
.dd-expanded-nft :is(.nft-detail-actions-inner,.dd-nft-utilities)>:is(a,button) { flex:0 1 auto; width:auto!important; min-height:44px; padding:9px 12px; font-size:13px; }
.dd-expanded-nft :is([data-nft-details],.dd-transfer-action,.dd-trait-preview) { box-sizing:border-box; min-height:44px; margin:0; padding:9px 12px; border:1px solid var(--dd-border-strong,#62627c); border-radius:8px; background:transparent; box-shadow:none; color:var(--dd-text,#f6f7fc); font:500 13px/1.4 Barlow,sans-serif; text-align:center; text-transform:none; letter-spacing:normal; transition:background-color 160ms,border-color 160ms,color 160ms; }
.dd-expanded-nft :is([data-nft-details],.dd-transfer-action,.dd-trait-preview):not(:disabled):hover { border-color:var(--dd-lilac,#c6b6ff); background:#c6b6ff0d; color:var(--dd-lilac,#c6b6ff); }
.dd-expanded-nft :is([data-nft-details],.dd-transfer-action,.dd-trait-preview):focus-visible { outline:2px solid var(--dd-lilac,#c6b6ff); outline-offset:3px; }
.dd-expanded-nft .dd-transfer-action:disabled { opacity:.45; cursor:not-allowed; }

/* Multiple editions retain each seller's price and its own share action. */
.dd-expanded-nft .community-token-listings { gap:16px; }
.dd-expanded-nft .offer { display:grid; gap:12px; }
.dd-expanded-nft .community-offer-summary { display:grid; align-content:start; gap:6px; min-width:0; }
.dd-expanded-nft .community-offer-summary .community-offer-price { font:600 27px/1.3 Barlow,sans-serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.dd-expanded-nft .community-offer-price small { font-size:12px; font-weight:400; color:var(--dd-muted,#d3d7e7); white-space:nowrap; }
.dd-expanded-nft .community-offer-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:start; gap:8px; min-width:0; }
.dd-expanded-nft .community-offer-controls>button { min-height:44px; padding:9px 12px; }
.dd-expanded-nft .community-offer-controls>.dd-listing-share-panel { grid-column:2; margin:0; padding:0; border:0; }
.dd-expanded-nft .community-offer-controls:has(>button:nth-of-type(2))>.dd-listing-share-panel { grid-column:1/-1; }
.dd-expanded-nft .community-offer-quantity { display:flex; align-items:center; justify-content:space-between; gap:12px; grid-column:1/-1; margin:0; font-size:13px; }
.dd-expanded-nft .community-offer-quantity input { width:80px; min-height:44px; padding:8px 10px; text-align:center; }
.dd-expanded-nft .community-offer-total { grid-column:1/-1; font-variant-numeric:tabular-nums; }

@container expanded-trading (min-width:480px) {
  .dd-expanded-nft :is(.nft-marketplace-panel,.ext-market) { grid-template-columns:minmax(0,1fr) minmax(180px,.8fr); gap:10px 24px; }
  .dd-expanded-nft :is(.marketplace-panel-top,.ext-market>div:first-child) { grid-column:1; grid-row:1/3; }
  .dd-expanded-nft :is(.action-row,.ext-market-actions) { grid-column:2; }
  .dd-expanded-nft :is(.action-row,.ext-market-actions):has(>button:nth-child(2)) { grid-column:2; }
  .dd-expanded-nft :is(.action-row,.ext-market-actions):has(>button:nth-child(2))+.dd-listing-share-panel { grid-column:2; }
  .dd-expanded-nft .offer { grid-template-columns:minmax(0,1fr) minmax(200px,.9fr); gap:20px; }
}
@container expanded-trading (max-width:300px) {
  .dd-expanded-nft .dd-nft-utilities:has(.dd-trait-preview) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dd-expanded-nft .dd-nft-utilities:has(.dd-trait-preview) .nft-detail-metadata { grid-column:1/-1; }
  .dd-expanded-nft .dd-nft-utilities:has(.dd-trait-preview)>button { width:100%!important; }
}
@media(min-width:601px) {
  .dd-expanded-nft { align-items:stretch; }
  /* The trading panel sets the row height, including offers loaded after expansion. */
  .dd-expanded-nft .nft-detail-overview { position:relative; min-height:280px; }
  .dd-expanded-nft .nft-detail-overview>.nft-detail-image-col:not(.dd-nft-artwork) { position:static; }
  .dd-expanded-nft .dd-nft-artwork { position:absolute; inset:0; height:100%; aspect-ratio:auto; }
  .dd-expanded-nft .dd-nft-artwork :is(img,video) { height:100%; object-fit:cover; object-position:center; }
}
@media(max-width:900px) and (min-width:601px) {
  .dd-expanded-nft { grid-template-columns:220px minmax(0,1fr); gap:18px; }
}
@media(max-width:600px) {
  .dd-expanded-nft { grid-template-columns:minmax(0,1fr); gap:16px; }
  .dd-expanded-nft :is(.nft-detail-market-col,.ext-detail-market) { grid-column:1/-1; grid-row:2; padding:14px; }
  .dd-expanded-nft .nft-detail-metadata { flex:1 1 auto; }
  .dd-expanded-nft :is(.listingBigPrice,.ext-big-price) { font-size:28px; }
  .dd-expanded-nft :is(.dd-nft-utilities,.nft-detail-market-col>.nft-detail-actions) { margin-top:12px; padding-top:12px; }
  .token-card.dd-expanded-nft { padding:14px; }
}
@media(max-width:360px) { .dd-expanded-nft .dd-listing-share { gap:6px; padding-inline:8px; font-size:13px; } }

/* Native modal focus containment; only the metadata body scrolls. */
.dd-nft-details-dialog { position:fixed; inset:0; box-sizing:border-box; width:min(620px,calc(100% - 32px)); max-width:none; max-height:min(780px,calc(100dvh - 48px)); margin:auto; padding:0; overflow:hidden; border:1px solid var(--dd-border-strong,#62627c); border-radius:16px; background:var(--dd-bg-2,#191943); color:var(--dd-text,#f6f7fc); box-shadow:0 28px 90px #0009; font-family:Barlow,sans-serif; text-align:left; }
.dd-nft-details-dialog[open] { display:flex; flex-direction:column; }
.dd-nft-details-dialog::backdrop { background:#080820c9; backdrop-filter:blur(6px); }
.dd-nft-details-header { display:flex; align-items:center; gap:16px; flex:none; padding:24px; border-bottom:1px solid var(--dd-border,#333353); }
.dd-nft-details-art { flex:none; width:64px; height:64px; object-fit:contain; border-radius:8px; background:var(--dd-bg,#0d0d2d); }
.dd-nft-details-header>div { min-width:0; flex:1; }
.dd-nft-details-label { display:block; margin-bottom:4px; font:500 12px/1.3 Barlow,sans-serif; color:var(--dd-lilac,#c6b6ff); }
.dd-nft-details-dialog h2 { margin:0; font:600 30px/1.1 'Barlow Condensed',Barlow,sans-serif; overflow-wrap:anywhere; }
.dd-nft-details-dialog h2:focus { outline:none; }
.dd-nft-details-subtitle { margin:6px 0 0; color:var(--dd-muted,#d3d7e7); font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.dd-nft-details-dialog .dd-nft-details-close { display:grid; place-items:center; flex:none; align-self:flex-start; width:44px; height:44px; margin:-10px -10px 0 0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--dd-muted,#d3d7e7); font:400 27px/1 Barlow,sans-serif; cursor:pointer; }
.dd-nft-details-close:hover { background:#ffffff0a; color:#fff; }
.dd-nft-details-body { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#62627c transparent; padding:24px; }
.dd-nft-details-body:focus-visible { outline:2px solid var(--dd-lilac,#c6b6ff); outline-offset:-4px; }
.dd-nft-details-body p { margin:0 0 16px; color:var(--dd-muted,#d3d7e7); font:400 14px/1.6 Barlow,sans-serif; }
.dd-nft-details-body p:last-child { margin-bottom:0; }
.dd-nft-details-body :is(.ext-attributes,.community-trait-list,.nft-detail-traits-wrap) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; max-height:none; margin:0; overflow:visible; }
.dd-nft-details-body :is(.ext-attribute,.community-trait-list>div,.trait-item) { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:4px; min-width:0; padding:14px 0; border:0; border-bottom:1px solid var(--dd-border,#333353); border-radius:0; background:transparent; }
.dd-nft-details-body :is(.ext-attribute label,.community-trait-list>div>span,.trait-type) { display:block; margin:0; color:var(--dd-muted,#d3d7e7); font:400 12px/1.4 Barlow,sans-serif; white-space:normal; overflow-wrap:anywhere; }
.dd-nft-details-body :is(.ext-attribute strong,.community-trait-list strong,.trait-value) { display:block; margin:0; color:var(--dd-text,#f6f7fc); font:500 15px/1.4 Barlow,sans-serif; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.dd-nft-details-body .trait-item { flex-direction:row; justify-content:space-between; align-items:center; gap:12px; }
.dd-nft-details-body .traits-list { display:contents; }
.dd-nft-details-body .chip { display:inline-flex; min-height:0; padding:3px 7px; border:1px solid var(--dd-border,#333353); border-radius:5px; font:400 12px/1.4 Barlow,sans-serif; white-space:nowrap; color:var(--dd-lilac,#c6b6ff); }
.dd-nft-details-body .trait-left { min-width:0; display:grid; gap:4px; }
.dd-nft-details-body .trait-colon { display:none; }
.dd-nft-details-body .trait-right { flex:none; }
.dd-nft-details-body .trait-right img { width:44px; height:44px; object-fit:contain; border-radius:6px; background:var(--dd-bg,#0d0d2d); }
.dd-nft-details-body .nft-detail-traits-wrap>p { grid-column:1/-1; }
.dd-nft-details-body .kv { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; margin-bottom:20px; font-size:14px; }
.dd-nft-details-body .kv .k { color:var(--dd-muted,#d3d7e7); }
.dd-nft-details-body .kv .v { color:var(--dd-text,#f6f7fc); font-variant-numeric:tabular-nums; }
.dd-nft-details-body .nft-detail-studio-link { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; font-size:14px; color:var(--dd-lilac,#c6b6ff); text-decoration:underline; text-underline-offset:4px; }
.dd-nft-details-links { display:flex; flex-wrap:wrap; column-gap:24px; }
.dd-nft-details-footer { display:flex; justify-content:flex-end; flex:none; padding:16px 24px; border-top:1px solid var(--dd-border,#333353); }
.dd-nft-details-done { min-height:44px; min-width:112px; padding:10px 24px; border:1px solid var(--dd-border-strong,#62627c); border-radius:8px; background:#ffffff08; color:var(--dd-text,#f6f7fc); font:500 14px/1.4 Barlow,sans-serif; cursor:pointer; transition:background-color 160ms,border-color 160ms; }
.dd-nft-details-done:hover { background:#ffffff12; border-color:var(--dd-lilac,#c6b6ff); }
.dd-nft-details-dialog :is(button,a):focus-visible { outline:2px solid var(--dd-lilac,#c6b6ff); outline-offset:3px; }
@media(max-width:600px) {
  .dd-nft-details-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 32px); border-radius:14px; }
  .dd-nft-details-header { gap:12px; padding:20px; }
  .dd-nft-details-art { width:48px; height:48px; }
  .dd-nft-details-dialog h2 { font-size:26px; }
  .dd-nft-details-body { padding:8px 20px 20px; }
  .dd-nft-details-body :is(.ext-attributes,.community-trait-list,.nft-detail-traits-wrap) { gap:0 16px; }
  .dd-nft-details-footer { padding:12px 20px; }
  .dd-nft-details-done { width:100%; }
}
@media(max-width:360px) {
  .dd-nft-details-header { padding:16px; }
  .dd-nft-details-art { width:40px; height:40px; }
  .dd-nft-details-dialog h2 { font-size:24px; }
  .dd-nft-details-body :is(.ext-attributes,.community-trait-list,.nft-detail-traits-wrap) { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:no-preference) {
  html:not([data-motion=reduced]) .is-artwork-loading :is(.row-chevron,.ext-chevron) { animation:dd-artwork-loading 800ms ease-in-out infinite alternate; }
  html:not([data-motion=reduced]) .community-expand.is-artwork-loading::after { animation:dd-artwork-spin 800ms linear infinite; }
  /* One quiet sweep when a row opens; no continuous animation over the artwork. */
  html:not([data-motion=reduced]) :is(.collapse.show,.community-detail-row:not([hidden])) .dd-nft-artwork::after { animation:dd-artwork-shimmer 1000ms 120ms ease-out both; }
  html:not([data-motion=reduced]) .dd-visual-system .dd-nft-details-dialog[open] { animation:dd-details-in 220ms cubic-bezier(.22,1,.36,1) both; }
  html:not([data-motion=reduced]) .dd-visual-system .dd-nft-details-dialog[open]::backdrop { animation:dd-details-backdrop-in 180ms ease-out both; }
  html:not([data-motion=reduced]) .dd-visual-system .dd-nft-details-dialog[open].is-closing { animation:dd-details-out 160ms ease-in both; }
  html:not([data-motion=reduced]) .dd-visual-system .dd-nft-details-dialog[open].is-closing::backdrop { animation:dd-details-backdrop-out 160ms ease-in both; }
}
@keyframes dd-artwork-loading { to { opacity:.35; } }
@keyframes dd-artwork-spin { to { transform:rotate(360deg); } }
@keyframes dd-artwork-shimmer { 0% { opacity:0; transform:translateX(-120%); } 20% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; transform:translateX(120%); } }
@keyframes dd-details-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes dd-details-out { to { opacity:0; transform:translateY(8px) scale(.99); } }
@keyframes dd-details-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes dd-details-backdrop-out { to { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .dd-expanded-nft :is([data-nft-details],.dd-transfer-action,.dd-trait-preview),.dd-nft-details-done { transition:none; } }
html[data-motion=reduced] :is([data-nft-details],.dd-transfer-action,.dd-trait-preview,.dd-nft-details-done) { transition:none; }