/* v3 · лента фильтров (из filters.js шаблонов) */
.filters__in { position: relative; scroll-behavior: smooth; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); }
.filters__in.is-drag { cursor: grabbing; scroll-behavior: auto; }
.filters__in.is-drag .flt { pointer-events: none; }
.filters .flt { position: relative; z-index: 1; background: transparent; transition: color .3s, border-color .3s; }
.filters .flt.is-on { background: transparent; }
.flt-thumb { position: absolute; z-index: 0; top: 12px; height: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 6px 24px rgba(128,210,7,.35); pointer-events: none; transition: left .45s cubic-bezier(.3,.7,.2,1), width .45s cubic-bezier(.3,.7,.2,1); }
.filters .wrap { position: relative; }
.flt-nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(3,4,2,.92); color: var(--fg, #fff); display: grid; place-items: center; cursor: pointer; transition: opacity .25s, border-color .2s, color .2s; }
.flt-nav:hover { border-color: var(--accent); color: var(--accent); }
.flt-nav svg { width: 16px; height: 16px; }
.flt-nav[hidden] { display: grid; opacity: 0; pointer-events: none; }
.flt-nav--prev { left: max(4px, calc(var(--gutter, 16px) - 20px)); }
.flt-nav--next { right: max(4px, calc(var(--gutter, 16px) - 20px)); }
@media (hover: none) { .flt-nav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .filters__in { scroll-behavior: auto; } .flt-thumb { transition: none; } }