.heading-xlg, .heading-lg, .heading-md, .heading-sm, .heading-xs {
  margin-bottom: 30px !important;
  margin-top: 10px !important;
}

/* "You may also like" on the product page: one row, never wraps.
   Extra cards scroll sideways instead of dropping to a second line. */
.pd-related-products {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #e5e7eb;
}

.pd-related-products .heading-lg {
  margin-bottom: 0;
  text-transform: none;
}

/* The shared card partial pads its list for the homepage; trim it here. */
.pd-related-products .product-gird {
  margin-top: 8px;
}

/* Extra specificity on purpose: product.css loads after this file and its
   `.product-gird .product { flex-wrap: wrap }` would otherwise win. */
.pd-related-products .product-gird ul.prod-grid-col5 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.pd-related-products .prod-grid-col5 > li {
  flex: 0 0 15%;
  width: auto;
  min-width: 160px;
  scroll-snap-align: start;
}

@media (max-width: 767px) {
  .pd-related-products .prod-grid-col5 > li {
    flex-basis: 45%;
    min-width: 140px;
  }
}

/* Titles on one line with an ellipsis, like the mockup. Long book names
   otherwise stretch every card in the row to 8-10 lines. */
.pd-related-products .prod-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0 !important;
}

.pd-related-products .product-detail .rating {
  margin-top: 6px !important;
}

/* Thin scrollbar: still tells people the row scrolls, without the chunky default. */
.pd-related-products .product-gird ul.prod-grid-col5 {
  scrollbar-width: thin;
}