/*
 * Canonical market-card component.
 *
 * This stylesheet is intentionally loaded after every legacy stylesheet.
 * Gem, engraving and Ark Grid card geometry must be changed here only.
 * Card height is content-driven: never add a fixed height/min-height/max-height.
 */
:root{
  --market-card-space:8px;
  --market-card-grid-gap:10px;
  --market-card-radius:12px;
  --market-card-image-size:48px;
  --market-card-item-size:44px;
  --market-card-action-height:38px;
}

/* Three market boards share one density and never force a row height. */
#gemsPage .gem-level-list,
#engravingsPage .engraving-market-grid-compact,
#arkgridPage .catalog-grid,
#materialsPage .materials-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  align-items:start!important;
  gap:var(--market-card-grid-gap)!important;
  padding:14px!important;
}

/* Ark Grid grade tabs render one board at a time. This must beat display:grid. */
#arkgridPage .catalog-grid.hidden{
  display:none!important;
}

/* Content owns the height; legacy fixed/minimum card heights are neutralized. */
#gemsPage .gem-market-card,
#engravingsPage .engraving-market-card,
#arkgridPage .arkgrid-market-card,
#materialsPage .materials-market-card{
  display:flex!important;
  flex-direction:column!important;
  align-self:start!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:var(--market-card-radius)!important;
  background:var(--surface-soft)!important;
  box-sizing:border-box!important;
  transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease!important;
}

/* A hovered product must be unmistakable without looking selected. */
#gemsPage .gem-market-card:hover,
#engravingsPage .engraving-market-card:hover,
#arkgridPage .arkgrid-market-card:hover,
#materialsPage .materials-market-card:hover,
#gemsPage .gem-market-card:has(:focus-visible),
#engravingsPage .engraving-market-card:has(:focus-visible),
#arkgridPage .arkgrid-market-card:has(:focus-visible),
#materialsPage .materials-market-card:has(:focus-visible){
  z-index:2!important;
  transform:translateY(-2px)!important;
  border-color:#6384aa!important;
  background:#121e2c!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 0 1px rgba(108,168,255,.14)!important;
}

#gemsPage .gem-market-card.selected:hover,
#gemsPage .gem-market-card.setup-selected:hover,
#engravingsPage .engraving-market-card.selected:hover,
#engravingsPage .engraving-market-card.setup-selected:hover,
#arkgridPage .arkgrid-market-card.selected:hover,
#arkgridPage .arkgrid-market-card.setup-selected:hover,
#materialsPage .materials-market-card.selected:hover,
#materialsPage .materials-market-card.setup-selected:hover{
  border-color:#6be4b2!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 0 1px rgba(82,217,160,.3)!important;
}

#gemsPage .gem-market-card .market-card-main,
#engravingsPage .engraving-market-card .market-card-main,
#arkgridPage .arkgrid-market-card .market-card-main,
#materialsPage .materials-market-card .market-card-main{
  display:grid!important;
  grid-template-columns:var(--market-card-image-size) minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  gap:2px 10px!important;
  padding:var(--market-card-space) var(--market-card-space) 0!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
  box-sizing:border-box!important;
}

#gemsPage .gem-market-card .market-card-image,
#engravingsPage .engraving-market-card .market-card-image,
#arkgridPage .arkgrid-market-card .market-card-image,
#materialsPage .materials-market-card .market-card-image{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:var(--market-card-image-size)!important;
  height:var(--market-card-image-size)!important;
  min-width:var(--market-card-image-size)!important;
  min-height:var(--market-card-image-size)!important;
  margin:0!important;
  border-radius:10px!important;
}

#gemsPage .gem-market-card .market-card-image .item-image,
#engravingsPage .engraving-market-card .market-card-image .item-image,
#arkgridPage .arkgrid-market-card .market-card-image .item-image,
#materialsPage .materials-market-card .market-card-image .item-image{
  width:var(--market-card-item-size)!important;
  height:var(--market-card-item-size)!important;
}

#gemsPage .gem-market-card .market-card-badge,
#engravingsPage .engraving-market-card .market-card-badge,
#arkgridPage .arkgrid-market-card .market-card-badge,
#materialsPage .materials-market-card .market-card-badge{
  grid-column:2!important;
  grid-row:1!important;
  min-height:0!important;
  padding-right:34px!important;
  font-size:12px!important;
  line-height:1.3!important;
}

#gemsPage .gem-market-card .market-card-name,
#engravingsPage .engraving-market-card .market-card-name,
#arkgridPage .arkgrid-market-card .market-card-name,
#materialsPage .materials-market-card .market-card-name{
  grid-column:2!important;
  grid-row:2!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding-right:34px!important;
  font-size:15px!important;
  line-height:1.4!important;
  text-align:left!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}

#gemsPage .gem-market-card .market-card-price,
#engravingsPage .engraving-market-card .market-card-price,
#arkgridPage .arkgrid-market-card .market-card-price,
#materialsPage .materials-market-card .market-card-price{
  grid-column:1 / -1!important;
  grid-row:3!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:5px 10px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:var(--market-card-space) 0 0!important;
  padding:9px 10px!important;
  border-radius:9px!important;
  background:#151f2d!important;
  text-align:left!important;
  box-sizing:border-box!important;
}

#gemsPage .gem-market-card .market-card-price>strong,
#engravingsPage .engraving-market-card .market-card-price>strong,
#arkgridPage .arkgrid-market-card .market-card-price>strong,
#materialsPage .materials-market-card .market-card-price>strong{
  min-width:0!important;
  margin:0!important;
  color:var(--gold)!important;
  font-size:19px!important;
  line-height:1.2!important;
  text-align:right!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}

#gemsPage .gem-market-card .market-card-price>small,
#gemsPage .gem-market-card .market-card-change,
#engravingsPage .engraving-market-card .market-card-price>small,
#engravingsPage .engraving-market-card .market-card-change,
#arkgridPage .arkgrid-market-card .market-card-price>small,
#arkgridPage .arkgrid-market-card .market-card-change,
#materialsPage .materials-market-card .market-card-price>small,
#materialsPage .materials-market-card .market-card-change{
  grid-column:1 / -1!important;
  max-width:none!important;
  font-size:11px!important;
  line-height:1.4!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Keep the complete change sentence readable as one consistently colored line. */
.market-card-change.down,
.market-card-change.down .price-deal-badge,
.engraving-detail-price .market-card-change.down,
.engraving-detail-price .market-card-change.down .price-deal-badge{
  color:#5aa8ff!important;
}
.market-card-change .price-deal-badge{
  display:inline!important;
  color:inherit!important;
  white-space:nowrap!important;
}
.market-card-change .market-change-separator{color:inherit!important;opacity:1!important;}

/* Price semantics must remain visible in both card and calculator layouts. */
.market-card-price-label,
.engraving-detail-price .current-price-label{
  color:#c8d8eb!important;
  font-size:12px!important;
  font-weight:900!important;
}
.market-card-recent,
.engraving-detail-price .recent-price-label{
  color:#b8cbe0!important;
  font-size:11px!important;
  font-weight:800!important;
}
.market-card-recent b,
.engraving-detail-price .recent-price-label b{color:var(--text)!important;font-weight:900!important;}
html[data-theme="light"] .market-card-price-label,
html[data-theme="light"] .engraving-detail-price .current-price-label{color:#29445f!important;}
html[data-theme="light"] .market-card-recent,
html[data-theme="light"] .engraving-detail-price .recent-price-label{color:#405d79!important;}

#gemsPage .gem-market-card .market-card-listing,
#engravingsPage .engraving-market-card .market-card-listing,
#arkgridPage .arkgrid-market-card .market-card-listing,
#materialsPage .materials-market-card .market-card-listing{
  grid-column:1 / -1!important;
  justify-self:start!important;
  margin:0!important;
  font-size:11px!important;
  white-space:nowrap!important;
}

#gemsPage .gem-market-card .market-card-actions,
#engravingsPage .engraving-market-card .market-card-actions,
#arkgridPage .arkgrid-market-card .market-card-actions,
#materialsPage .materials-market-card .market-card-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-height:0!important;
  max-width:calc(100% - 16px)!important;
  gap:var(--market-card-space)!important;
  margin:0 var(--market-card-space) var(--market-card-space)!important;
  padding:var(--market-card-space) 0 0!important;
  box-sizing:border-box!important;
}

#gemsPage .gem-market-card .market-card-actions>button,
#engravingsPage .engraving-market-card .market-card-actions>button,
#arkgridPage .arkgrid-market-card .market-card-actions>button,
#materialsPage .materials-market-card .market-card-actions>button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  width:100%!important;
  min-height:var(--market-card-action-height)!important;
  margin:0!important;
  padding:8px 10px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  box-sizing:border-box!important;
}

@media(max-width:960px){
  #gemsPage .gem-level-list,
  #engravingsPage .engraving-market-grid-compact,
  #arkgridPage .catalog-grid,
  #materialsPage .materials-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:430px){
  #gemsPage .gem-level-list,
  #engravingsPage .engraving-market-grid-compact,
  #arkgridPage .catalog-grid,
  #materialsPage .materials-grid{grid-template-columns:1fr!important;padding:12px!important}
}