/* BidAndSold UX v7 refinements */

/* Compare is a normal, labelled control inside each card. It must never float over marketplace buttons. */
.listing-compare{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  z-index:auto!important;
  width:max-content!important;
  min-width:0!important;
  height:27px!important;
  min-height:27px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  margin:6px 0 5px!important;
  padding:0 8px!important;
  border:1px solid #d0d5dd!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#475467!important;
  box-shadow:none!important;
  font-size:.61rem!important;
  font-weight:800!important;
  line-height:1!important;
  cursor:pointer;
}
.listing-compare:hover{border-color:#d7a94e!important;background:#fffaf0!important;color:#8c5b0e!important}
.listing-compare input{width:13px!important;height:13px!important;margin:0!important;accent-color:#111827}
.listing-compare span{display:inline!important;white-space:nowrap!important}
.density-compact .listing-compare{height:24px!important;min-height:24px!important;margin:4px 0!important;padding:0 6px!important;font-size:.57rem!important}

/* Use family cards only where a family really has multiple members. Singleton models share one compact panel. */
.model-family-grid-v7{align-items:start}
.model-family-grid-v7 .model-family{padding:10px}
.model-family-grid-v7 .model-family h3{margin-bottom:6px}
.model-family-grid-v7 .model-family-multi a{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-family-singles{grid-column:1/-1!important}
.model-family-singles>div{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
.model-family-singles a{font-size:.68rem;border:1px solid #eaecf0;border-radius:999px;padding:4px 8px;text-decoration:none;background:#f9fafb}
.model-family-singles a:hover{border-color:#d7a94e;background:#fffaf0}

/* The drawer lives inside a dark hero in the DOM, so explicitly reset its text colors. */
.explore-drawer-v7{color:#111827!important;background:#fff!important;padding:0!important}
.explore-drawer-v7 .explore-drawer-head{padding:15px 16px 12px!important;background:#fff;color:#111827!important}
.explore-drawer-v7 .explore-drawer-head>div{display:grid;gap:2px;min-width:0}
.explore-drawer-v7 .explore-drawer-head small{color:#8c5b0e!important;font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.explore-drawer-v7 .explore-drawer-head strong{color:#111827!important;font-size:1rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explore-drawer-v7 .explore-tree{padding:11px 16px!important;border-bottom:1px solid #eef0f3;color:#667085!important}
.explore-drawer-v7 .explore-tree a{color:#8c5b0e!important}
.explore-drawer-v7 .explore-tree strong{color:#344054!important}
.explore-current{margin:12px 16px 4px;padding:11px 12px;border:1px solid #ead9b6;border-radius:10px;background:#fffaf2;display:grid;gap:2px}
.explore-current span{font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;font-weight:850;color:#8c5b0e!important}
.explore-current strong{font-size:.82rem;color:#111827!important}
.explore-current small{font-size:.63rem;color:#667085!important}
.explore-drawer-section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;padding:13px 16px 8px;color:#111827!important}
.explore-drawer-section-head strong{font-size:.78rem;color:#111827!important}
.explore-drawer-section-head a{font-size:.62rem;color:#8c5b0e!important;text-decoration:none;white-space:nowrap}
.explore-drawer-v7 .explore-drawer-links{padding:0 16px 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.explore-drawer-v7 .explore-drawer-links a{color:#344054!important;background:#fff!important;border-color:#e4e7ec!important;line-height:1.25;min-height:36px;display:flex;align-items:center}
.explore-drawer-v7 .explore-drawer-links a:hover{color:#8c5b0e!important;border-color:#d7a94e!important;background:#fffaf0!important}
.explore-empty{margin:0 16px 18px;color:#667085!important;font-size:.72rem}

@media(max-width:680px){
  .explore-drawer-v7 .explore-drawer-links{grid-template-columns:1fr}
}