/* Keep merchant navigation distinct without changing ordinary seller labels. */
.listing-card .merchant-store-card-link {
  max-width: 100%;
  padding: .12rem .36rem;
  display: block;
  border: 1px solid var(--brand);
  border-radius: .38rem;
  color: var(--on-brand);
  background: var(--brand);
  text-decoration: none;
  cursor: pointer;
}

.listing-card .merchant-store-card-link:hover {
  background: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.listing-card .merchant-store-card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  text-decoration: underline;
}

/* About 20% less desktop/tablet height, using spacing and the image frame.
   Text keeps its existing size; images keep object-fit: contain. Content may
   grow for longer titles or accessibility text rather than being clipped. */
@media (min-width: 521px) {
  .listing-card .listing-image { aspect-ratio: 5 / 3; }
  .listing-card .listing-body { padding-block: .68rem; }
  .listing-card .listing-body h3 {
    min-height: 2.12rem;
    margin-block: .36rem .24rem;
  }
  .listing-card .listing-meta { margin-bottom: .56rem; }
  .listing-card .seller-summary-row {
    min-height: 2.24rem;
    margin-bottom: .6rem;
    padding-block: .3rem;
    row-gap: .16rem;
  }
  .listing-card .listing-bottom { padding-top: .56rem; }
  .listing-card .listing-bottom strong {
    max-width: 100%;
    flex-shrink: 0;
    overflow-wrap: anywhere;
  }
  .listing-card .listing-actions-row { min-height: 1.8rem; margin-top: .4rem; }
}

/* Compact mobile cards already use a separate layout; retain its proportions. */
@media (max-width: 520px) {
  .listing-card .merchant-store-card-link { padding: .04rem .16rem; border-radius: .24rem; }
}