.listing-strip {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 12px 4%;
  background: #fff4e3;
  color: #171713;
  border-bottom: 1px solid #ebd9bd;
}
main:has(> .stage.explored) > .listing-strip { display: flex; }
.listing-strip h2 {
  margin: 0;
  font: 700 12px/1.4 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.listing-links { display: flex; gap: 12px; }
.listing-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid #cfa968;
  border-radius: 4px;
  background: #fffdfa;
  transition: background .2s, border-color .2s;
}
.listing-link span { font-size: 13px; color: #615541; }
.listing-link strong { font-size: 16px; font-weight: 700; }
.listing-link:hover { background: #ffe4b9; border-color: #a96800; }
.listing-link:focus-visible { outline-color: #855200; outline-offset: 3px; }
.listing-all {
  min-height: 44px;
  padding: 10px 4px;
  background: none;
  border: 0;
  color: #704700;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.listing-all:hover { color: #171713; }
.listing-intro { margin: -10px 0 32px; color: #68685f; line-height: 1.6; }
.listing-directory { display: grid; gap: 32px; }
.listing-group h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.listing-group > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.listing-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 22px 18px; border: 1px solid #e5e0d6; border-radius: 7px; background: #fffdfa; }
.listing-card:hover { border-color: #cfa968; background: #fff4e3; }
.listing-logo { flex: 0 0 44px; object-fit: contain; border-radius: 50%; }
/* The supplied capsule fits within the central 281px square; omit its empty side margins. */
.listing-logo[src$="/pump.png"] { object-fit: cover; border-radius: 0; }
.listing-card-text { min-width: 0; }
.listing-card-text strong { font: 700 19px/1.3 'Manrope', sans-serif; }
.listing-card-text small { display: block; color: #68685f; line-height: 1.5; font-size: 13px; margin-top: 5px; }
.listing-action { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #8a4900; }
.listing-new { display: inline-block; vertical-align: middle; margin-left: 8px; border-radius: 3px; padding: 3px 6px; background: #fff0d8; color: #855200; font: 600 10px/1.2 'DM Sans', sans-serif; }
@media (max-width: 1000px) {
  .listing-group > div { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .listing-strip { gap: 14px; }
  .listing-link { padding: 10px 12px; }
}
@media (max-width: 600px) {
  .listing-strip { flex-direction: column; gap: 8px; padding: 12px 6%; }
  .listing-strip h2 { font-size: 10px; }
  .listing-links { width: 100%; gap: 8px; }
  .listing-link { flex: 1; flex-wrap: wrap; column-gap: 5px; row-gap: 0; padding: 8px; }
  .listing-link span { font-size: 11px; }
  .listing-link strong { font-size: 15px; }
  .listing-all { min-height: 44px; padding: 8px 12px; }
  .listing-card { padding: 16px 12px; gap: 10px; flex-wrap: wrap; }
  .listing-logo { width: 36px; height: 36px; flex-basis: 36px; }
  .listing-card-text { flex: 1; }
  .listing-card-text strong { font-size: 17px; }
  .listing-action { flex-basis: calc(100% - 46px); margin-left: 46px; }
}