/* Benzer Ürünler: layout only. Shared UI owns color, type, shape and icon sizes. */
.sfui-related-products { display: grid; gap: var(--sfui-space-8); min-width: 0; padding: 0; }
/* Page-level use takes width/gutters from sfui-shell; embedded uses keep their own container. */
.sfui-related-products--page { padding-block-end: var(--sfui-space-14); }
.sfui-related-products__heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; grid-template-areas: "identity groups motion link"; align-items: center; gap: var(--sfui-space-16); padding: var(--sfui-space-16); }
.sfui-related-products__summary, .sfui-related-products__controls { display: contents; }
.sfui-related-products__identity { grid-area: identity; display: flex; align-items: center; gap: var(--sfui-space-12); min-width: 0; }
.sfui-related-products__identity > div { min-width: 0; }
.sfui-related-products__category-link { grid-area: link; }
.sfui-related-products__motion { grid-area: motion; }
.sfui-related-products__groups { grid-area: groups; border-inline-start: var(--sfui-border-width) solid var(--sfui-border); padding-inline-start: var(--sfui-space-16); display: flex; gap: var(--sfui-space-10); width: max-content; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-block: var(--sfui-space-4); padding-inline-end: var(--sfui-space-4); }
.sfui-related-products__groups > .sfui-icon-frame-control { flex: 0 0 auto; max-width: 100%; }
.sfui-related-products__group { min-width: 0; scroll-margin-block-start: var(--sfui-space-24); }
.sfui-related-products__track { --sfui-related-columns: 6; --sfui-related-gap: var(--sfui-space-20); --sfui-product-strip-column-width: calc((100% - (var(--sfui-related-columns) - 1) * var(--sfui-related-gap)) / var(--sfui-related-columns)); display: grid; grid-auto-flow: var(--sfui-track-flow, column); grid-auto-columns: var(--sfui-track-column, var(--sfui-product-strip-column-width)); grid-template-columns: var(--sfui-track-template, none); gap: var(--sfui-related-gap); align-items: stretch; overflow-x: var(--sfui-track-overflow, auto); overscroll-behavior-x: contain; overflow-anchor: none; scrollbar-width: none; padding: var(--sfui-track-padding, var(--sfui-space-4)); }
.sfui-related-products__track::-webkit-scrollbar { display: none; }
/* Full result collections can opt into the existing responsive columns without strip motion. */
.sfui-related-products__track--grid { --sfui-track-flow: row; --sfui-track-column: auto; --sfui-track-template: repeat(var(--sfui-related-columns),minmax(0,1fr)); --sfui-track-overflow: visible; }
@media (min-width: 1200px) {
  .sfui-related-products__track--five { --sfui-related-columns: 5; }
}
@media (min-width: 768px) {
  .sfui-related-products--ungrouped .sfui-related-products__heading { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "identity link"; }
  .sfui-related-products__track--desktop-grid { --sfui-track-flow: row; --sfui-track-column: auto; --sfui-track-template: repeat(var(--sfui-related-columns),minmax(0,1fr)); --sfui-track-overflow: visible; }
  .sfui-related-products--limited .sfui-related-products__mobile-group { display: none; }
}
@media (max-width: 1199.98px) {
  .sfui-related-products__track { --sfui-related-columns: 4; }
}
@media (max-width: 767.98px) {
  .sfui-related-products--page { padding-block-end: var(--sfui-space-8); }
  .sfui-related-products__track { --sfui-related-columns: 2; --sfui-related-gap: var(--sfui-space-12); }
  .sfui-related-products__heading { grid-template-columns: minmax(0,1fr); grid-template-areas: none; padding: var(--sfui-space-8); gap: var(--sfui-space-8); }
  .sfui-related-products__summary { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "identity link"; align-items: center; gap: var(--sfui-space-8); min-width: 0; }
  .sfui-related-products__identity { gap: var(--sfui-space-8); }
  .sfui-related-products__controls { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "groups motion"; align-items: center; gap: var(--sfui-space-8); min-width: 0; }
  .sfui-related-products__groups { border-inline-start: 0; padding: 0; gap: var(--sfui-space-8); }
}
@media (max-width: 374.98px) {
  .sfui-related-products--page { padding-block-end: var(--sfui-space-6); }
}