.single-service .related-services-horizontal {
  padding: 0.5rem 0;
}

.single-service .related-services-list {
  display: grid;
  gap: 0; /* overrides previous gap: 1rem */
  padding: 0;
  margin: 0;
  list-style: none;
  background: #f2f2f2;
}

/* Base list item styles */
.single-service .related-services-list li.related-service-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: transparent;
  transition: background-color 0.2s ease;
  height: 100%;
  min-height: 60px;
  font-size: var(--wp--preset--font-size--small);
}

/* Anchor inside each item */
.single-service .related-services-list li.related-service-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.75rem 0.5rem;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  font-weight: var(--wp--custom--font-weight--semi-bold);
  text-align: center;
}

/* Hover state */
.single-service .related-services-list li.related-service-item:hover {
  background-color: #dddede;
}

/* Highlight current item */
.single-service .related-services-list li.related-service-item.current {
  background-color: var(--wp--preset--color--base);
  font-weight: var(--wp--custom--font-weight--bold);
}

/* MOBILE: do not show */
@media (max-width: 959px) {
  .single-service .related-services-horizontal {
	display: none;
  }
}

/* DESKTOP: full-row layout for 2–10 items */
@media (min-width: 960px) {
  .single-service .related-services-list.count-2  { grid-template-columns: repeat(2, 1fr); }
  .single-service .related-services-list.count-3  { grid-template-columns: repeat(3, 1fr); }
  .single-service .related-services-list.count-4  { grid-template-columns: repeat(4, 1fr); }
  .single-service .related-services-list.count-5  { grid-template-columns: repeat(5, 1fr); }
  .single-service .related-services-list.count-6  { grid-template-columns: repeat(6, 1fr); }
  .single-service .related-services-list.count-7  { grid-template-columns: repeat(7, 1fr); }
  .single-service .related-services-list.count-8  { grid-template-columns: repeat(8, 1fr); }
  .single-service .related-services-list.count-9  { grid-template-columns: repeat(9, 1fr); }
  .single-service .related-services-list.count-10 { grid-template-columns: repeat(10, 1fr); }
}