/* =============================================================================
   Velorex Music — "More like this" on the product page
   Markup: #related-section in index.html (and seo-render.php's server copy).
   JS: renderRelatedProducts() / bindRelatedRail() / scrollRelatedRail() in
   src/js/storefront/pages.js.

   A sideways row of the normal product cards instead of a grid, so up to
   eight similar records cost one row of page height.

   Selectors start from #related-grid on purpose: .products-grid has explicit
   column counts at half a dozen breakpoints in storefront.css, and the id
   outranks all of them without !important.
   ============================================================================= */

#related-section .related-head { align-items: flex-end; margin-bottom: 1.25rem; }

/* Arrows appear only when the row overflows (.has-overflow, set by JS). */
.related-arrows { display: none; gap: 0.5rem; }
#related-section.has-overflow .related-arrows { display: flex; }
.related-arrow {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.related-arrow:hover:not(:disabled) { border-color: var(--secondary); color: var(--secondary); }
.related-arrow:disabled { opacity: 0.35; cursor: default; }

#related-grid.related-rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 3 * 1.25rem) / 4);   /* 4 cards visible */
  grid-auto-rows: auto;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  /* Room for the card's hover lift and shadow, which overflow would clip. */
  padding: 0.5rem 0.25rem 1rem;
  margin: -0.5rem -0.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#related-grid.related-rail > .product-card { scroll-snap-align: start; min-width: 0; }

@media (max-width: 1100px) {
  #related-grid.related-rail { grid-auto-columns: calc((100% - 2 * 1rem) / 3); gap: 1rem; }
}
/* Phones: two cards and a sliver of the third, which is what says "swipe". */
@media (max-width: 640px) {
  #related-grid.related-rail { grid-auto-columns: 44%; gap: 0.75rem; }
  #related-section.has-overflow .related-arrows { display: none; }   /* swipe instead */
}

@media (prefers-reduced-motion: reduce) {
  #related-grid.related-rail { scroll-behavior: auto; }
}