/* Herbruikbare "gerelateerde producten"-sectie (cross-sell / upsell / re-order).
   Gebruikt op de productdetailpagina en herbruikbaar op winkelmand/overzicht.
   Markup van RelatedProductsRenderer; cards via product-card.css. */

.related-products {
    max-width: var(--content-max);
    margin: var(--space-6) auto 0;
    padding-inline: var(--gutter);
}

.related-products__title {
    font-size: var(--fs-h2);
    margin: 0 0 var(--space-3);
}

.related-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(48%, var(--ws-grid-min-card, 16rem)), 1fr));
    gap: var(--space-4);
}

/* Re-order ("bijbestellen"): verbruik/navullingen — compactere, bredere kaarten
   zodat het als een handige bijbestel-lijst leest i.p.v. een vol productraster. */
.related-products--reorder .related-products__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-3);
}

/* Cross-sell krijgt een subtiel accent-randje boven de sectie. */
.related-products--crosssell {
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    padding-top: var(--space-5);
}