/* ==========================================================================
   Related products — LIST/GRID layout only, for the single-product page's
   related-products pattern (patterns/related-products.php).

   Card-item styling (shell, image, badge, rating row, title, price, button)
   comes from product-card-reskin.css, scoped under
   .wp-block-woocommerce-product-collection and enqueued on this page too.
   This file owns only the row/grid behaviour, which is intentionally
   different from the homepage (product-section.css) and /shop
   (archive-product-list-reskin.css) grids.

   Mobile-first: horizontal scroll row of fixed-width cards below 560px
   (5 columns don't fit and a 2-col grid crushes card width to ~150px —
   scroll keeps cards a usable size). Grid takes over at 560px+.
   ========================================================================== */

.related-products .wc-block-product-template {
  list-style: none;
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1rem;
  padding: 0 0 0.5rem;
  margin: 1.5rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}

.related-products .wc-block-product-template::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.related-products .wc-block-product-template.is-flex-container > li {
  flex: 0 0 65%;
  scroll-snap-align: start;
}

@media (min-width: 560px) {
  .related-products .wc-block-product-template {
    display: grid !important;
    overflow-x: visible;
    grid-template-columns: repeat(3, 1fr);
    /* max-content rows + start alignment stop the grid stretching each card
       to the tallest in its row. Without this a stretched <li> gives the
       card a definite height, which cascades down the height:100% chain to
       .wp-block-wp2025custom-dynamic-image-container and overrides its
       aspect-ratio:16/9 (the homepage grid, product-section.css, does the
       same). */
    grid-auto-rows: max-content;
    align-items: start;
    gap: 1.5rem;
    padding: 0;
  }

  .related-products .wc-block-product-template.is-flex-container > li {
    flex: initial;
  }
}

@media (min-width: 900px) {
  .related-products .wc-block-product-template {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* WC's own .is-flex-container>li rule sets width:100%/calc(20% - 1em)
   directly on the <li>, which wins over the grid track sizing above
   (an explicit width on a grid item isn't cleared by display:grid).
   Override it so the item fills its grid cell instead. */
.related-products .wc-block-product-template.is-flex-container > li {
  width: auto !important;
  margin: 0;
}