/* Canonical MyTradeHub listing component — Profile, Trade Hub and Auction */
:root{
  --mth-listing-max:1180px;
  --mth-listing-visual-w:170px;
  --mth-listing-visual-h:116px;
  --mth-listing-actions-w:132px;
  --mth-listing-radius:14px;
}

/* One width everywhere */
.tradehub-shell,
.auction-hub-shell,
#profileContent .profile-listings-controls,
#profileContent .profile-listing-group-head,
#profileContent .profile-auction-grid,
#profileContent .profile-trade-listings,
#tradeHubFeed,
#auctionGrid{
  width:100%!important;
  max-width:var(--mth-listing-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box;
}
#tradeHubFeed,#auctionGrid{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

/* Canonical row shell */
.mth-listing-row{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--mth-listing-actions-w);
  border:1px solid var(--line);
  border-radius:var(--mth-listing-radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:none;
  box-sizing:border-box;
}
.mth-row-main{
  min-width:0;
  display:grid;
  align-items:stretch;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:0;
}
.mth-trade-row .mth-row-main{
  grid-template-columns:var(--mth-listing-visual-w) minmax(220px,1fr) 34px minmax(360px,1.35fr);
}
.mth-auction-row .mth-row-main{
  grid-template-columns:var(--mth-listing-visual-w) minmax(250px,1fr) minmax(220px,.75fr);
}

/* Shared asset box */
.mth-row-visual{
  width:var(--mth-listing-visual-w);
  min-width:var(--mth-listing-visual-w);
  height:var(--mth-listing-visual-h);
  min-height:var(--mth-listing-visual-h);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:linear-gradient(145deg,var(--surface-2),var(--surface));
}
.mth-row-visual .mth-row-photo-fallback{display:grid;place-items:center;width:100%;height:100%;min-width:0;color:#7e69dc;font-size:48px;line-height:1;font-weight:650;background:var(--surface-2,#f2f4f3)}
.mth-row-visual .mth-photo-fill{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.mth-row-visual .mth-photo-fill[hidden]{display:none!important}
.mth-row-visual .mth-icon-svg{width:54px;height:54px}

/* Shared details box */
.mth-row-copy{
  min-width:0;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mth-row-title{
  font-size:.94rem;
  line-height:1.22;
  font-weight:800;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.mth-row-location{
  margin-top:3px;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.mth-row-value{margin-top:9px;display:flex;flex-direction:column}
.mth-row-value small,.mth-auction-facts small{font-size:.8rem;color:var(--muted)}
.mth-row-value strong,.mth-auction-facts strong{font-family:Manrope,sans-serif;font-size:.9rem;margin-top:2px}
.mth-row-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;color:var(--muted);font-size:.8rem}

/* Trade wants box — bounded so it never overlaps actions */
.mth-row-swap{
  align-self:center;
  justify-self:center;
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  font-size:.8rem;
}
.mth-row-intent{
  min-width:0;
  overflow:hidden;
  padding:10px 12px;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mth-row-kicker{
  margin-bottom:6px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.mth-row-wants{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.mth-row-want{
  min-width:0;
  min-height:54px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  box-sizing:border-box;
}
.mth-row-want-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  color:#947cff;
  background:rgba(124,99,255,.08);
}
.mth-row-want-icon.cash{border-radius:50%;font-family:Manrope,sans-serif;font-weight:900}
.mth-row-want-icon .mth-icon-svg{width:28px;height:28px}
.mth-row-want-copy{min-width:0;display:flex;flex-direction:column}
.mth-row-want-copy strong,
.mth-row-want-copy small{
  white-space:normal;
  overflow:hidden;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.mth-row-want-copy strong{-webkit-line-clamp:2;font-size:.8rem;line-height:1.2}
.mth-row-want-copy small{-webkit-line-clamp:2;margin-top:3px;color:var(--muted);font-size:.8rem;line-height:1.2}
.mth-row-empty{color:var(--muted);font-size:.8rem}

/* Auction info box */
.mth-auction-facts{
  margin-top:9px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.mth-auction-facts>div{display:flex;flex-direction:column}
.mth-auction-summary{font-size:.8rem;color:var(--muted)}

/* Same action box everywhere */
.mth-row-actions{
  min-width:0;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:10px;
}
.mth-row-actions .quiet{
  width:100%;
  min-height:40px;
  padding:8px 10px;
  border-radius:8px;
  font-size:.8rem;
}
.mth-listing-row:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}

/* Profile sections use the same rows without legacy geometry */
#profileContent .profile-auction-grid,
#profileContent .profile-trade-listings{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin-bottom:14px!important;
}
#profileContent .profile-listing-group-head{
  margin-top:20px!important;
  margin-bottom:9px!important;
  padding:0 2px 7px!important;
  border-bottom:1px solid var(--line);
}
#profileContent .profile-auction-card,
#profileContent .profile-trade-listing{
  width:100%!important;
  max-width:none!important;
}

/* Preserve auction badges */
.mth-row-visual .auction-status{left:7px;top:7px}

/* Responsive: same behavior everywhere */
@media(max-width:1100px){
  .tradehub-shell,.auction-hub-shell,
  #profileContent .profile-listings-controls,
  #profileContent .profile-listing-group-head,
  #profileContent .profile-auction-grid,
  #profileContent .profile-trade-listings,
  #tradeHubFeed,#auctionGrid{
    max-width:calc(100vw - 40px)!important;
  }
}
@media(max-width:980px){
  .mth-listing-row{grid-template-columns:minmax(0,1fr) 124px}
  .mth-trade-row .mth-row-main{grid-template-columns:150px minmax(0,1fr) 30px}
  .mth-trade-row .mth-row-intent{grid-column:1/4;border-left:0;border-top:1px solid var(--line)}
  .mth-auction-row .mth-row-main{grid-template-columns:150px minmax(0,1fr)}
  .mth-auction-row .mth-row-intent{grid-column:1/3;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:720px){
  .tradehub-shell,.auction-hub-shell,
  #profileContent .profile-listings-controls,
  #profileContent .profile-listing-group-head,
  #profileContent .profile-auction-grid,
  #profileContent .profile-trade-listings,
  #tradeHubFeed,#auctionGrid{
    max-width:calc(100vw - 20px)!important;
  }
  .mth-listing-row{grid-template-columns:1fr}
  .mth-trade-row .mth-row-main,
  .mth-auction-row .mth-row-main{grid-template-columns:118px minmax(0,1fr)}
  .mth-row-visual{width:118px;min-width:118px;height:108px;min-height:108px}
  .mth-row-swap{display:none}
  .mth-row-intent{grid-column:1/-1!important;border-left:0;border-top:1px solid var(--line)}
  .mth-row-actions{border-left:0;border-top:1px solid var(--line);flex-direction:row}
  .mth-row-actions .quiet{flex:1}
}
@media(max-width:480px){
  .mth-row-wants{grid-template-columns:1fr}
  .mth-row-copy{padding:9px 10px}
  .mth-row-title{font-size:.86rem}
}
:root[data-theme="night"] .mth-listing-row{background:#101512;border-color:#29312d}