.cardslider { position: relative; }
.cardslider__track {
display: flex;
align-items: flex-start;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 4px 2px 14px;
scrollbar-width: thin;
}
.cardslider__track > * {
flex: 0 0 clamp(280px, 86%, 356px);
scroll-snap-align: start;
}
@media (min-width: 720px) {
.cardslider__track > * { flex-basis: 340px; }
}
.cardslider__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 42px; height: 42px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.96); color: #111111;
border: 1px solid rgba(15, 23, 42, 0.14);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
font-size: 24px; line-height: 1; cursor: pointer; z-index: 6;
transition: opacity .15s, background .15s, border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
.cardslider__nav:hover { background: #fff; border-color: rgba(15, 23, 42, 0.3); }
}
.cardslider__nav:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.cardslider__nav--prev { left: 4px; }
.cardslider__nav--next { right: 4px; }
.cardslider__nav[disabled] { opacity: 0; pointer-events: none; }
.cardslider--static .cardslider__nav { display: none; }
@media (max-width: 640px) {
.cardslider__nav { display: none; }
.cardslider__track { gap: 14px; }
}