/* Draggable card rows (Compare page: Most compared, brand comparisons, Popular devices).
   Swipe on phones, drag with the mouse or use the arrows on computers. js/drag-row.js adds the arrows. */
.ls-drag-wrap { position: relative; }
ul.ls-drag {
    display: flex !important; flex-wrap: nowrap; gap: 12px; margin: 0; padding: 2px 2px 8px; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
ul.ls-drag::-webkit-scrollbar { display: none; }
ul.ls-drag > li { flex: 0 0 calc((100% - 24px) / 3.15); min-width: 0; scroll-snap-align: start; }
ul.ls-drag.ls-cmp-pick-grid > li { flex-basis: calc((100% - 24px) / 3.3); }
ul.ls-drag.ls-cmp-pick-grid > li:nth-child(n) { display: flex; } /* every card, also on phones */
ul.ls-drag.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
ul.ls-drag.is-dragging a, ul.ls-drag.is-dragging img { pointer-events: none; }
ul.ls-drag img { -webkit-user-drag: none; user-select: none; }

/* Arrows (computers) */
.ls-drag-btn {
    position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; min-height: 0; margin-top: -23px; padding: 0;
    border: 1px solid #d3deee; border-radius: 50%; background: #fff; color: #071d33;
    box-shadow: 0 4px 14px rgba(7, 29, 51, .14); cursor: pointer; transition: opacity .15s, background-color .15s, border-color .15s;
}
.ls-drag-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ls-drag-btn.is-prev { left: -12px; }
.ls-drag-btn.is-next { right: -12px; }
.ls-drag-wrap .ls-drag-btn:hover, .ls-drag-wrap .ls-drag-btn:focus-visible { background: #eaf2ff; border-color: #0b5fd8; color: #071d33; outline: none; }
.ls-drag-btn[hidden] { display: none; }

@media (max-width: 1024px) {
    ul.ls-drag > li, ul.ls-drag.ls-cmp-pick-grid > li { flex-basis: calc((100% - 12px) / 2.2); }
}
@media (max-width: 600px) {
    ul.ls-drag { gap: 10px; padding-right: 14px; }
    ul.ls-drag > li { flex-basis: 74%; }
    ul.ls-drag.ls-cmp-pick-grid > li { flex-basis: 82%; }
    .ls-drag-btn { display: none; } /* swipe on phones */
}
@media (hover: none) { .ls-drag-btn { display: none; } }