/* related — more under a record's page: a heading, the way to all of them, the cards (one look for every kind). */

.related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }

.related__head .product-section-title { font-size: 1.6rem; margin: 0; }

.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap, 1.4rem); }

.related--columns-1 .related__grid { grid-template-columns: minmax(0, 1fr); }

.related--columns-2 .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.related--columns-4 .related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .related--columns-3 .related__grid, .related--columns-4 .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .related .related__grid { grid-template-columns: minmax(0, 1fr); }
}

/* The card: the whole card is the link, the action above it, the price the last line. */
.related-card { position: relative; padding: 0; overflow: hidden; container-type: inline-size; }

.related-card:hover { transform: translateY(-2px); }

.related-card__link { color: inherit; }

.related-card__link::after { content: ''; position: absolute; inset: 0; z-index: 0; }

.related-card__link:focus-visible { outline: none; }

.related-card:has(.related-card__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }

.related-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hover-wash); }

/* The photo's shape — `ratio`: wide 16:9, standard 4:3, square. */
.related--ratio-standard .related-card__media { aspect-ratio: 4 / 3; }

.related--ratio-square .related-card__media { aspect-ratio: 1; }

.related-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* `fit: contain` — the whole photo on the plate colour, nothing cut. */
.related--contain .related-card__media { background: var(--plate, #fff); }

.related--contain .related-card__media img { object-fit: contain; padding: .6rem; }

.related-card__body { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.3rem 1.4rem 1.2rem; }

.related-card .related-card__title {
  margin: 0; font-size: 1.1rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; max-height: 2.6em;
}

.related-card__excerpt {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--body-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3.2em;
}

.related-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .5rem; min-height: 2.5rem; }

.related-card__price { min-width: 0; color: var(--ink); }

.related-card__price-line { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.related-card__action { position: relative; z-index: 1; flex: none; }

.related-card__action:empty { display: none; }

/* A card too narrow for the price and the button side by side (four to a row, or two on a phone): the price above,
   the button under it — the price is never covered. Decided by the card's own width, so every card in a row agrees. */
@container (max-width: 360px) {
  .related-card__foot { flex-direction: column; align-items: flex-start; gap: .6rem; }
}