.related-content--author_related_articles p.hs-search-results__description {
  display: none !important;
}
#hsresults {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
.related-text-copy {
  margin-top: auto;
  margin-bottom: auto;
}
.related-text-copy a,
.related-text-copy p,
.related-text-copy span {
  font-family: Gotham, Arial, Sans-serif;
}
.related-text-copy a,
.related-text-copy span {
  font-size: 18px;
  color: #0064ff;
  text-decoration: none;
}
.related-text-copy a:hover {
  font-size: 18px;
  font-weight: 600;
}
#hsresults > li {
  display: flex;
  margin-bottom: 0;
  background-color: white;
  padding: 24px;
  border-radius: 24px;
  width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(230, 230, 239);
}
#hsresults > li:hover {border-width:2px;}
li > div.hs-search-results__featured-image > img,
li > div.hs-search-results__featured-image > a > img {
  float: left;
  width: 100px;
  max-width: 192px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 24px 0 0;
  border-radius: 25px;
}
.hs-search-results__listing {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-search-results__pagination {
  max-width: 800px;
  margin: 16px auto 0;
  overflow: hidden;
}
.hs-search-results__prev-page,
.hs-search-results__next-page {
  font-family: Gotham, Arial, Sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0064ff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.hs-search-results__prev-page:hover,
.hs-search-results__next-page:hover {
  background-color: #f3f6ff;
  text-decoration: none;
}
.hs-search-results__prev-page:active,
.hs-search-results__next-page:active {
  background-color: #e6ecff;
}
.hs-search-results__prev-page {
  float: left;
}
.hs-search-results__next-page {
  float: right;
}
.hs-search-results__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 8px 0 0;
}
@media screen and (min-width: 701px) {
  .hs-search-results__listing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media screen and (max-width: 700px) {
  #hsresults > li {
    display: block;
    margin-bottom: 48px;
  }
  li > div.hs-search-results__featured-image > img,
  li > div.hs-search-results__featured-image > a > img {
    max-width: 100%;
    width: 100%;
    margin-bottom: 12px;
  }
}
.related-content--product .hs-search-results__description,
.related-content--smart .hs-search-results__description {
  display: none !important;
}
.related-content--product .hs-search-results__pagination,
.related-content--smart .hs-search-results__pagination,
.related-content--author_related_articles .hs-search-results__pagination {
  display: block !important;
}


/* ==========================================================
   ADD these rules to your existing stylesheet.
   Nothing needs deleting.

   NOTE: if you already added an earlier version of this file:
   - REPLACE the plain
       #hsresults > li:nth-child(n+11) { display: none; }
     with the :not([data-paged]) version in rule 3.
   - REPLACE `font: inherit` in rule 1 with the explicit
     font-family/size/weight below. The shorthand was resetting
     the 16px/600 from your existing prev/next rule.
   ========================================================== */

/* 1. The prev/next controls are <button> elements now, not <a>.
      Strip the native button chrome. Font properties are restated
      explicitly rather than via `font: inherit`, because that
      shorthand resets font-size and font-weight too. */
.hs-search-results__prev-page,
.hs-search-results__next-page {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: Gotham, Arial, Sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: inherit;
}

/* 2. Pin the blue across every state. A <button> inherits nothing from
      your anchor styles, and theme stylesheets commonly set a hover
      colour on bare `button:hover` — which would win for `color`,
      since your existing hover rule only declares background and
      text-decoration. Listing the states here at (0,2,0) specificity
      beats an element-level `button:hover` at (0,1,1).

      Background is deliberately NOT set here, so the #f3f6ff hover
      tint and #e6ecff active tint in your existing rules still apply. */
.hs-search-results__prev-page,
.hs-search-results__next-page,
.hs-search-results__prev-page:hover,
.hs-search-results__next-page:hover,
.hs-search-results__prev-page:focus,
.hs-search-results__next-page:focus,
.hs-search-results__prev-page:focus-visible,
.hs-search-results__next-page:focus-visible,
.hs-search-results__prev-page:active,
.hs-search-results__next-page:active {
  color: #0064ff;
  text-decoration: none;
}

/* Keyboard focus stays visible now that these are buttons. */
.hs-search-results__prev-page:focus-visible,
.hs-search-results__next-page:focus-visible {
  outline: 2px solid #0064ff;
  outline-offset: 2px;
}

/* 3. Before JS runs, hide rows past the first page so the full list
      doesn't flash on load. Scoped to :not([data-paged]) — JS sets
      data-paged as soon as it takes over, switching this off for good.
      Without that scope the rule keeps re-hiding rows 11+ on later
      pages. n+11 pairs with PRODUCT_LIMIT = 10. */
.related-content--product .hs-search-results:not([data-paged]) #hsresults > li:nth-child(n+11),
.related-content--smart .hs-search-results:not([data-paged]) #hsresults > li:nth-child(n+11) {
  display: none;
}

/* 4. The paging toggle. Keeps the ID so it outranks #hsresults > li
      (1,0,1) and its max-width:700px override; this is 1,1,1. */
#hsresults > li.related-item--paged-out {
  display: none;
}

@media (width <= 600px) { #hsresults > li {width:inherit; }