.product-pill {
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.product-pill[href]:hover {
  color: #fff;
  border-color: #8067ff;
  background: rgba(128, 103, 255, .14);
}

.region-pill { color: #858b95; }

.related-products {
  margin-top: 86px;
  padding-top: 65px;
  border-top: 1px solid #292d34;
}

.related-products .section-heading h2 {
  font-size: clamp(34px, 3vw, 48px);
}

.related-heading-actions,
.slider-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.related-heading-actions > a {
  padding: 9px 13px;
  color: #c5c7cc;
  text-decoration: none;
  border-radius: 9px;
}

.related-heading-actions > a:hover { color: #fff; background: #1a1d23; }

.slider-buttons button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #f4f4f6;
  border: 1px solid #343943;
  border-radius: 50%;
  background: #191c22;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}

.slider-buttons button:hover:not(:disabled) { border-color: #8067ff; background: #28233f; }
.slider-buttons button:disabled { opacity: .28; cursor: default; }

.related-slider-frame { min-width: 0; overflow: hidden; }

.related-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 4);
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.related-grid::-webkit-scrollbar { display: none; }
.related-grid .game-card { scroll-snap-align: start; }

@media (max-width: 1120px) {
  .related-grid { grid-auto-columns: calc((100% - 32px) / 3); }
}

@media (max-width: 820px) {
  .related-grid { grid-auto-columns: calc((100% - 16px) / 2); }
}

@media (max-width: 560px) {
  .related-products { margin-top: 58px; padding-top: 45px; }
  .related-products .section-heading { align-items: flex-start; }
  .related-heading-actions { gap: 5px; }
  .related-heading-actions > a { display: none; }
  .slider-buttons { gap: 7px; }
  .slider-buttons button { width: 38px; height: 38px; }
  .related-grid { grid-auto-columns: 86%; gap: 12px; }
}