/* ===========================================================
   Plink Exchange — Airgun Directory
   Layered styles. All design tokens come from /vendor/dev-base.css.
   =========================================================== */

/* ---------- Page head ---------- */
.dx-page-head { padding: var(--s-9) 0 var(--s-7) !important; }
.dx-page-title {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 900;
  letter-spacing: -.034em;
  line-height: 1.02;
  margin: var(--s-4) 0 var(--s-3);
  max-width: 18ch;
}
.dx-page-lede { max-width: 64ch; margin-bottom: var(--s-6); }
.dx-page-lede strong { color: var(--charcoal); font-variant-numeric: tabular-nums; font-weight: 700; }

.dx-page-meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: var(--t-sm); color: var(--charcoal-3);
}
.dx-page-meta li { display: flex; align-items: center; gap: 8px; }
.dx-page-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.dx-page-meta strong { color: var(--charcoal); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Stacking-context fix for typeahead --------------
   The dev base CSS sets `section { position:relative; z-index:2 }` on EVERY
   section. That puts the toolbar and results sections at the same z-index,
   and since results comes later in the DOM, it would overlap the typeahead
   that lives inside the toolbar. Force the toolbar above results so the
   suggestion dropdown floats over the cards below. ----------------------- */
.dx-toolbar-wrap {
  padding-top: 0 !important;
  position: relative;
  z-index: 40 !important;
}
.dx-results-wrap {
  position: relative;
  z-index: 1 !important;
  padding-top: var(--s-7) !important;
  padding-bottom: var(--s-10) !important;
}

/* ---------- Tabs ---------- */
.dx-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: var(--s-5);
}
.dx-tab {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--charcoal-3);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: all .16s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.dx-tab:hover { color: var(--charcoal); }
.dx-tab.is-active { background: #fff; color: var(--charcoal); box-shadow: var(--shadow-sm); }
.dx-tab-count {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--paper-deep);
  color: var(--charcoal-3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.dx-tab.is-active .dx-tab-count { background: var(--orange-tint); color: var(--orange-deep); }

.dx-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) 2fr auto;
  gap: var(--s-4);
  align-items: end;
}
@media (max-width: 980px) { .dx-toolbar { grid-template-columns: 1fr; } }

/* ---------- Search + typeahead ---------- */
.dx-search-wrap { position: relative; }
.dx-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; z-index: 2;
}
#dxSearch {
  width: 100%;
  padding: 12px 40px 12px 38px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  background: #fff;
  font-family: var(--body);
  font-size: var(--t-sm);
  color: var(--charcoal);
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}
#dxSearch:focus { border-color: var(--orange); box-shadow: var(--focus-ring); }
#dxSearch::placeholder { color: var(--muted); }

.dx-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-warm);
  color: var(--charcoal-3);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  z-index: 2;
}
.dx-search-clear:hover { background: var(--charcoal); color: #fff; }

.dx-typeahead {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  max-height: 380px;
  overflow-y: auto;
  z-index: 50;
  padding: 6px;
}
.dx-typeahead-section {
  padding: 8px 10px 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline;
}
.dx-typeahead-section + .dx-typeahead-section { border-top: 1px dashed var(--rule); margin-top: 4px; padding-top: 10px; }

.dx-typeahead-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .1s;
  font-size: var(--t-sm);
}
.dx-typeahead-item:hover, .dx-typeahead-item.is-active { background: var(--paper-warm); }
.dx-ta-logo {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.dx-ta-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.dx-ta-logo-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.02em;
}
.dx-ta-text { min-width: 0; }
.dx-ta-name { font-weight: 600; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-ta-name mark { background: var(--orange-tint); color: var(--orange-deep); padding: 0 2px; border-radius: 2px; font-weight: 700; }
.dx-ta-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-ta-kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.dx-typeahead-empty {
  padding: 14px;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* ---------- Facets + sort ---------- */
.dx-facets { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.dx-facet-host { position: relative; }
.dx-facet {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s, background .16s;
}
.dx-facet:hover { border-color: var(--charcoal); }
.dx-facet[data-active="true"] {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--charcoal);
}
.dx-facet-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.dx-facet[data-active="true"] .dx-facet-label { color: var(--orange-soft); }
.dx-facet svg { width: 9px; height: 9px; opacity: .6; }

.dx-facet-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 35;
  font-weight: 400;
  color: var(--charcoal);
}
.dx-facet-menu button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  text-align: left;
  color: var(--charcoal);
  transition: background .1s;
}
.dx-facet-menu button:hover { background: var(--paper-warm); }
.dx-facet-menu button[aria-pressed="true"] { background: var(--orange-tint); color: var(--orange-deep); font-weight: 600; }
.dx-facet-menu .dx-facet-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dx-sort { display: flex; flex-direction: column; gap: 6px; }
.dx-sort label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
#dxSort {
  padding: 11px 36px 11px 14px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  background: #fff;
  font-family: var(--body);
  font-size: var(--t-sm);
  color: var(--charcoal);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' stroke='%234A5560' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
#dxSort:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }

/* ---------- Result meta ---------- */
.dx-result-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.dx-result-count {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--charcoal-3);
}
.dx-result-count strong { color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.dx-reset {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--orange-soft);
  background: var(--orange-tint);
  cursor: pointer;
  transition: all .12s;
}
.dx-reset:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); }
.dx-reset:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
  color: var(--muted);
  border-color: var(--rule);
}

/* ---------- Cards grid ---------- */
.dx-grid {
  display: grid;
  /* 3 cards across at desktop. minmax keeps natural flow at narrower widths
     (becomes 2-up around 900px, 1-up below 600px). */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--s-5);
}
.dx-grid[data-mode="listings"] { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 600px) { .dx-grid { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ---------- Manufacturer card ---------- */
.dx-card {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  cursor: pointer;
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  display: flex; flex-direction: column; gap: var(--s-4);
  text-align: left;
  width: 100%;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  min-height: 296px;
  /* --accent is set inline per card based on brand_type_group */
}
.dx-card:hover {
  border-color: var(--accent, var(--charcoal));
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent, var(--charcoal)) 35%, transparent);
}
.dx-card:focus-visible { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }

/* Accent strip — 3px colored bar along the left edge tying the card to its
   brand_type_group (manufacturer = green, licensed = purple, importer =
   orange, legacy = amber, emerging = red, mixed = slate). Subtle but
   immediate; lets the eye group cards across a long grid. */
.dx-card-accent {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--charcoal-3));
  opacity: .85;
  transition: width .16s var(--ease-out), opacity .16s var(--ease-out);
}
.dx-card:hover .dx-card-accent { width: 4px; opacity: 1; }

/* Confidence pill — small chip in the top-right corner. The 4-tier color
   maps the textual confidence ("High" → "Low") to a visual rating so
   buyers can spot well-verified entries without parsing the field. */
.dx-conf-pill {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  color: var(--charcoal-3);
  white-space: nowrap;
}
.dx-conf-pill.tier-1 { background: rgba(178,58,26,.10); color: var(--tier-1); border-color: rgba(178,58,26,.3); }
.dx-conf-pill.tier-2 { background: rgba(224,112,36,.10); color: var(--tier-2); border-color: rgba(224,112,36,.3); }
.dx-conf-pill.tier-3 { background: rgba(229,165,60,.14); color: #a87121; border-color: rgba(229,165,60,.35); }
.dx-conf-pill.tier-4 { background: rgba(90,143,58,.10); color: var(--topo-sage-deep); border-color: rgba(90,143,58,.35); }

/* Country flag — emoji rendered slightly larger than body text so it
   reads as a graphic element rather than typography. Sits before the
   country name in the eyebrow row. */
.dx-flag {
  font-size: 13px;
  line-height: 1;
  margin-right: 2px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  letter-spacing: 0;
}

/* Type glyph — small symbolic icon prefixing the Type stat value. Drawn
   from a curated list (gear, bullseye, diamond, etc.) so each brand_type
   has a recognizable mark. Renders inline with the value text. */
.dx-type-glyph {
  display: inline-block;
  margin-right: 5px;
  font-size: 12px;
  color: var(--accent, var(--muted));
  font-weight: 400;
  vertical-align: -0.02em;
}

/* Tier dot — small colored circle prefixing risk/support values. The
   tinted dot makes the support tier visible in peripheral vision;
   pairing the color with the text label makes it accessible. */
.dx-tier-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 0.05em;
  background: var(--charcoal-3);
}
.dx-tier-dot.tier-1 { background: var(--tier-1); box-shadow: 0 0 0 2px rgba(178,58,26,.15); }
.dx-tier-dot.tier-2 { background: var(--tier-2); box-shadow: 0 0 0 2px rgba(224,112,36,.15); }
.dx-tier-dot.tier-3 { background: #d4a23a; box-shadow: 0 0 0 2px rgba(229,165,60,.18); }
.dx-tier-dot.tier-4 { background: var(--topo-sage-deep); box-shadow: 0 0 0 2px rgba(90,143,58,.18); }

/* Drawer hero accent strip — same idea as the card accent but along the
   full-height left edge of the dark hero band. Subtle on the dark
   background but unmistakable when scanning between drawers. */
.dx-drawer-hero-accent {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--accent, var(--orange));
  opacity: .9;
}
.dx-drawer-hero { position: relative; }

.dx-card-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dx-card-logo {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.dx-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.dx-card-logo-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.02em;
}
.dx-card-head-text { min-width: 0; flex: 1; }
.dx-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-card-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -.022em;
  line-height: 1.12;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dx-card-desc {
  font-size: var(--t-sm);
  color: var(--charcoal-3);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Grade row — three letter badges showing reliability / value / customer
   service grades A through F. Sits between the description and the
   foot stats, gives the card a focal "ratings strip" that reads like
   a report card. Each badge has a tier color (A green, B sage-amber,
   C amber, D-F warning red) and a small label below it. */
.dx-grades {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: var(--s-3) 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.dx-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.dx-grade-badge {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--paper-warm);
  color: var(--charcoal-3);
  border: 1.5px solid var(--rule);
  transition: transform .14s var(--ease-out);
  flex-shrink: 0;
}
.dx-card:hover .dx-grade-badge { transform: translateY(-1px); }
.dx-grade-badge.grade-a { background: rgba(90,143,58,.12); color: var(--topo-sage-deep); border-color: rgba(90,143,58,.45); }
.dx-grade-badge.grade-b { background: rgba(168,166,80,.18); color: #6a6420; border-color: rgba(168,166,80,.5); }
.dx-grade-badge.grade-c { background: rgba(229,165,60,.18); color: #a87121; border-color: rgba(229,165,60,.5); }
.dx-grade-badge.grade-d { background: rgba(224,112,36,.14); color: var(--tier-2); border-color: rgba(224,112,36,.45); }
.dx-grade-badge.grade-f { background: rgba(178,58,26,.14); color: var(--tier-1); border-color: rgba(178,58,26,.45); }
.dx-grade-badge.grade-unknown { opacity: .35; }
.dx-grade-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

/* Card foot: a fixed grid of three labeled stat blocks. */
.dx-card-foot {
  display: grid;
  grid-template-columns: 0.95fr 1.25fr 0.85fr;
  gap: 10px;
  padding-top: var(--s-3);
  width: 100%;
}
.dx-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dx-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.dx-stat-value {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx-stat-value.tier-1 { color: var(--tier-1); }
.dx-stat-value.tier-2 { color: var(--tier-2); }
.dx-stat-value.tier-3 { color: #a87121; }
.dx-stat-value.tier-4 { color: var(--topo-sage-deep); }
.dx-stat-value .dim { color: var(--muted); font-weight: 400; }

/* ---------- Listing card ---------- */
.dx-listing-card {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
  cursor: pointer;
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-3);
  text-align: left;
  width: 100%;
  font-family: inherit;
  overflow: hidden;
  min-height: 110px;
}
.dx-listing-card:hover { border-color: var(--charcoal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dx-listing-card:focus-visible { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }

.dx-listing-logo {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.dx-listing-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.dx-listing-logo-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--charcoal-3) 0%, var(--charcoal) 100%);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.dx-listing-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dx-listing-brand {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-listing-model {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -.012em;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Listing card stat row — three labeled stat blocks just like the
   manufacturer card foot. Same .dx-stat / .dx-stat-label / .dx-stat-value
   classes for visual consistency across both card types. */
.dx-listing-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.dx-listing-stats .dx-stat-value { font-size: 12px; }
.dx-listing-stats .dx-stat-value.is-caliber { color: var(--orange-deep); }
.dx-listing-stats .dx-stat-value em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 10px; margin-left: 1px; }

.dx-listing-card { min-height: 130px; }

/* ---------- Mini-chip (used in card foot) — bounded, ellipsis ---------- */
.dx-mini-chip {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  color: var(--charcoal-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}
.dx-mini-chip.tier-1 { background: rgba(178, 58, 26, 0.08); color: var(--tier-1); border-color: rgba(178, 58, 26, 0.3); }
.dx-mini-chip.tier-2 { background: rgba(224, 112, 36, 0.08); color: var(--tier-2); border-color: rgba(224, 112, 36, 0.3); }
.dx-mini-chip.tier-3 { background: rgba(229, 165, 60, 0.12); color: #a87121; border-color: rgba(229, 165, 60, 0.3); }
.dx-mini-chip.tier-4 { background: rgba(90, 143, 58, 0.08); color: var(--topo-sage-deep); border-color: rgba(90, 143, 58, 0.3); }
.dx-mini-chip.charcoal { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }

/* ---------- Pagination ---------- */
.dx-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: var(--s-7);
  flex-wrap: wrap;
}
.dx-pg-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  transition: all .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.dx-pg-btn:hover:not(:disabled) { border-color: var(--charcoal); background: var(--paper-warm); }
.dx-pg-btn[aria-current="page"] {
  background: var(--charcoal); color: var(--paper); border-color: var(--charcoal);
  font-weight: 700;
}
.dx-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.dx-pg-ellipsis { color: var(--muted); padding: 0 6px; font-family: var(--mono); }
.dx-pg-meta {
  width: 100%;
  text-align: center;
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Empty state ---------- */
.dx-empty {
  text-align: center;
  padding: var(--s-10) var(--s-5);
  border: 1.5px dashed var(--rule);
  border-radius: var(--r-lg);
  background: #fff;
}
.dx-empty-mark {
  font-family: var(--mono);
  font-size: 48px;
  color: var(--muted);
  margin-bottom: var(--s-3);
  font-weight: 300;
}
.dx-empty h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.dx-empty p { color: var(--charcoal-3); margin-bottom: var(--s-4); }

/* ---------- Drawer ---------- */
.dx-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(31, 37, 40, .45);
  backdrop-filter: blur(2px);
  z-index: 60;
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.dx-drawer-overlay.is-open { opacity: 1; }

.dx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(640px, 100vw);
  background: #fff;
  z-index: 70;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .26s var(--ease-out);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
}
.dx-drawer.is-open { transform: translateX(0); }
.dx-drawer:focus { outline: none; }

.dx-drawer-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--paper);
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
  cursor: pointer;
}
.dx-drawer-close:hover { background: var(--paper); color: var(--charcoal); }

.dx-drawer-hero {
  background: var(--charcoal);
  color: var(--paper);
  padding: var(--s-7) var(--s-7) var(--s-6);
  display: flex; align-items: flex-start; gap: var(--s-4);
  position: relative;
  flex-shrink: 0;
}
.dx-drawer-hero-logo {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.dx-drawer-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dx-drawer-hero-logo-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.dx-drawer-hero-text { min-width: 0; flex: 1; padding-right: var(--s-7); }
.dx-drawer-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eye);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-soft);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
#dxDrawerTitle {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 var(--s-3);
}
.dx-drawer-hero-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s-3);
}

/* Labeled hero stats — used in both manufacturer and listing drawer heroes.
   Compact horizontal layout where each value sits under a tiny mono label
   so the meaning of the value is explicit, not inferred. */
.dx-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: var(--s-3);
}
.dx-hero-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dx-hero-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange-soft);
}
.dx-hero-stat-value {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx-hero-stat-value.tier-1 { color: #ffb499; }
.dx-hero-stat-value.tier-2 { color: #ffc89a; }
.dx-hero-stat-value.tier-3 { color: #ffd5a3; }
.dx-hero-stat-value.tier-4 { color: #c9d8b8; }
.dx-hero-stat-value.orange { color: var(--orange); }

.dx-drawer-body {
  padding: var(--s-6) var(--s-7) var(--s-9);
  overflow-y: auto;
  flex: 1;
}

.dx-drawer-section + .dx-drawer-section {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.dx-drawer-section h3 {
  font-family: var(--mono);
  font-size: var(--t-eye);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 600;
  margin: 0 0 var(--s-3);
}
.dx-drawer-section p { font-size: var(--t-sm); color: var(--charcoal); line-height: 1.62; margin: 0 0 8px; }
.dx-drawer-section p.dim { color: var(--charcoal-3); }
.dx-drawer-section p:last-child { margin-bottom: 0; }
.dx-drawer-section .lead { font-size: var(--t-md); color: var(--charcoal); }

.dx-kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px var(--s-4);
  font-size: var(--t-sm);
}
.dx-kv dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-top: 2px;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 8px;
}
.dx-kv dd {
  margin: 0;
  color: var(--charcoal);
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 8px;
  word-break: break-word;
}
.dx-kv dt:last-of-type, .dx-kv dd:last-of-type { border-bottom: none; padding-bottom: 0; }

.dx-source-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dx-source-list li {
  font-size: var(--t-xs);
  color: var(--charcoal-3);
  display: flex; align-items: baseline; gap: 8px;
}
.dx-source-list a { color: var(--orange-deep); word-break: break-all; }
.dx-source-list a:hover { color: var(--orange); }
.dx-source-list .num {
  font-family: var(--mono); font-weight: 700; color: var(--muted);
  flex-shrink: 0;
}

.dx-related {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.dx-related-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.dx-related-item:hover { border-color: var(--charcoal); background: #fff; }
.dx-related-logo {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dx-related-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.dx-related-logo-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--charcoal-3) 0%, var(--charcoal) 100%);
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dx-related-text { min-width: 0; }
.dx-related-name { font-weight: 600; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-related-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-related-arrow { color: var(--muted); font-family: var(--mono); font-size: 14px; }

@media (max-width: 600px) {
  .dx-kv { grid-template-columns: 1fr; gap: 4px; }
  .dx-kv dt { padding-bottom: 0; border-bottom: none; }
  .dx-kv dd { padding-bottom: 10px; margin-top: 0; }
  .dx-drawer-hero { padding: var(--s-6) var(--s-5) var(--s-5); }
  .dx-drawer-body { padding: var(--s-5) var(--s-5) var(--s-9); }
}

/* ====================================================================
   v38 additions — image gallery, price band, production status chip,
   large grade badges, outbound manufacturer link
   ==================================================================== */

/* Image gallery in listing drawer — masonry-style grid that adapts to
   image count. 1 image fills full width; 2 split 50/50; 3-5 use a
   flexible 2-column grid with the first image taking 2 rows. */
.dx-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
.dx-image-grid[data-img-count="1"] { grid-template-columns: 1fr; }
.dx-image-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.dx-image-tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.dx-image-tile.is-broken { display: none; } /* hide images that 404 */

/* Price band — used-market reference shown as a horizontal rail with
   typical-price marker between low and high anchors. The marker is
   centered for now (since we don't have a live "this listing" price);
   when a seller listing is added later, marker position shifts to
   reflect the listing's relation to the band. */
.dx-price-band {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.dx-price-rail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.dx-price-low, .dx-price-high {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--charcoal-3);
  font-variant-numeric: tabular-nums;
}
.dx-price-track {
  position: relative;
  height: 6px;
  background: linear-gradient(90deg, var(--paper-warm) 0%, var(--orange-tint) 50%, var(--paper-warm) 100%);
  border-radius: 999px;
}
.dx-price-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(242, 92, 31, 0.4);
}
.dx-price-stats {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.dx-price-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.dx-price-stat-value {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dx-price-asof {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}

/* Production status chip on listing card — small ribbon next to the
   brand label that signals Current/Discontinued/Vintage at a glance. */
.dx-listing-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--paper-warm);
  color: var(--charcoal-3);
  border: 1px solid var(--rule);
  vertical-align: 1px;
}
.dx-listing-status.is-current      { background: rgba(90,143,58,.12);  color: var(--topo-sage-deep); border-color: rgba(90,143,58,.4); }
.dx-listing-status.is-discontinued { background: rgba(229,165,60,.16); color: #a87121; border-color: rgba(229,165,60,.4); }
.dx-listing-status.is-vintage      { background: rgba(122,108,240,.12); color: #4a3fb8; border-color: rgba(122,108,240,.4); }

/* Listing-card price line — shows typical used price under the model. */
.dx-listing-price {
  font-size: 12.5px;
  color: var(--charcoal-3);
  margin-top: 2px;
}
.dx-listing-price strong {
  color: var(--charcoal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Large grade row inside manufacturer drawer — same idea as the card-
   level row, but bigger and with descriptive subtitles for each axis. */
.dx-grades-large {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 480px) {
  .dx-grades-large { grid-template-columns: 1fr 1fr 1fr; }
}
.dx-grade-large {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.dx-grade-badge-large {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--paper-warm);
  color: var(--charcoal-3);
  border: 1.5px solid var(--rule);
  flex-shrink: 0;
}
.dx-grade-badge-large.grade-a { background: rgba(90,143,58,.14); color: var(--topo-sage-deep); border-color: rgba(90,143,58,.5); }
.dx-grade-badge-large.grade-b { background: rgba(168,166,80,.20); color: #6a6420; border-color: rgba(168,166,80,.55); }
.dx-grade-badge-large.grade-c { background: rgba(229,165,60,.20); color: #a87121; border-color: rgba(229,165,60,.55); }
.dx-grade-badge-large.grade-d { background: rgba(224,112,36,.16); color: var(--tier-2); border-color: rgba(224,112,36,.5); }
.dx-grade-badge-large.grade-f { background: rgba(178,58,26,.16); color: var(--tier-1); border-color: rgba(178,58,26,.5); }
.dx-grade-badge-large.grade-unknown { opacity: .35; }
.dx-grade-large-text { min-width: 0; }
.dx-grade-large-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -.012em;
}
.dx-grade-large-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

/* Outbound link — "View on manufacturer site" pill button */
.dx-outbound-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper-warm);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  transition: all .14s var(--ease-out);
}
.dx-outbound-link:hover {
  border-color: var(--orange);
  color: var(--orange-deep);
  background: var(--orange-tint);
}
.dx-outbound-arrow {
  font-size: 14px;
  color: var(--muted);
  transition: transform .14s var(--ease-out);
}
.dx-outbound-link:hover .dx-outbound-arrow {
  transform: translate(2px, -2px);
  color: var(--orange);
}