/* Sneaker Revival – Before & After */
.srjba { --a-cyan: var(--srj-cyan, #00f0e8); --a-navy: var(--srj-navy, #021118); position: relative; }
.srjba-track { display: grid; grid-template-columns: repeat(var(--srjba-cols, 4), minmax(0, 1fr)); gap: 18px; }
.srjba-item { margin: 0; }
.srjba-item.is-hidden { display: none; }
.srjba-frame { position: relative; border-radius: var(--srj-radius, 10px); overflow: hidden; aspect-ratio: 210 / 118; background: #1b2a31; border: 1px solid rgba(255, 255, 255, .1); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.srjba-img, .srjba-frame picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.srjba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.srjba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .35); pointer-events: none; z-index: 2; }
.srjba-handle > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--a-navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.srjba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; }
.srjba-range:focus-visible + .srjba-label, .srjba-slider:focus-within .srjba-handle > span { outline: 3px solid var(--a-cyan); }
.srjba-label { position: absolute; bottom: 10px; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; z-index: 4; pointer-events: none; }
.srjba-label--before { left: 10px; background: rgba(2, 17, 24, .85); color: #fff; }
.srjba-label--after { right: 10px; background: var(--a-cyan); color: var(--a-navy); }
.srjba-item figcaption { font-size: 13px; margin-top: 8px; color: inherit; opacity: .85; }
.srjba--carousel .srjba-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.srjba--carousel .srjba-track::-webkit-scrollbar { display: none; }
.srjba--carousel .srjba-item { flex: 0 0 calc((100% - 18px * (var(--srjba-cols) - 1)) / var(--srjba-cols)); scroll-snap-align: start; }
.srjba-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.srjba-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
.srjba-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.srjba-filters button { border: 1px solid var(--srj-border, #e3eaee); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--srj-ink, #0b1b24); }
.srjba-filters button.is-active { background: var(--a-navy); border-color: var(--a-navy); color: var(--a-cyan); }
.srjba--gallery .srjba-frame { aspect-ratio: 3 / 2; }
.srjba--gallery .srjba-item figcaption { color: var(--srj-ink, #0b1b24); }
@media (max-width: 1024px) { .srjba-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srjba--carousel .srjba-item { flex-basis: 70%; } }
@media (max-width: 640px) { .srjba-track { grid-template-columns: 1fr; } .srjba--carousel .srjba-item { flex-basis: 88%; } }