[data-related-slider] { --related-gap: 24px; }
.related-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.related-heading h2 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.3; }
.related-controls { display: flex; flex-shrink: 0; gap: 8px; }
.related-controls[hidden] { display: none; }
.related-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #000; transition: opacity .2s, background .2s; }
.related-controls button:disabled { opacity: .3; cursor: default; }
.related-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.related-track {
    display: flex;
    gap: var(--related-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #bcc6bf #f3f4f1;
    padding: 4px 0 22px;
    direction: rtl;
    touch-action: pan-x pan-y pinch-zoom;
    cursor: grab;
}
.related-track > .product-card { flex: 0 0 calc((100% - (var(--related-columns) - 1) * var(--related-gap)) / var(--related-columns)); scroll-snap-align: start; }
.related-track .product-gallery { overflow: hidden; }
.related-track .product-slide, .related-track .product-media { background: transparent; border-radius: 0; }
.related-track .product-slide img { object-fit: contain; mix-blend-mode: normal; }
.related-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.related-track:focus-visible, .related-controls button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.related-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) { .related-controls button:not(:disabled):hover { background: #f3f4f1; } }
@media (max-width: 900px) and (min-width: 651px) { [data-related-slider] { --related-columns: 2.5 !important; } }
@media (max-width: 650px) {
    [data-related-slider] { --related-gap: 16px; }
    .related-heading { gap: 12px; align-items: flex-end; }
    .related-heading h2 { font-size: 23px; }
    .related-controls { gap: 4px; }
    .related-track > .product-card { flex-basis: calc((100% - (var(--related-mobile-columns) - 1) * var(--related-gap)) / var(--related-mobile-columns)); }
}
@media (prefers-reduced-motion: reduce) { .related-controls button { transition: none; } }