/* Related-products section on the product pages.
 *
 * A separate file for the same reason as product-detail.css: /assets is
 * served with an immutable cache, so new styles get a new URL rather than
 * edits to a file repeat visitors already hold.
 */

.related { padding: clamp(20px,3vw,40px) clamp(24px,8vw,130px) clamp(80px,9vw,130px); }
.related ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.related li { background: var(--ink); padding: 26px clamp(20px,2.2vw,30px); }
.related a {
  display: block; color: var(--paper); text-decoration: none;
  font: 400 21px/1.25 var(--serif); margin-bottom: 8px;
}
.related a:hover { color: var(--accent); }
.related span { color: var(--muted); font-size: 13px; line-height: 1.6; }