.bscroll{position:relative;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--coal) 60%,transparent);padding-block:14px}.bscroll__viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}.bscroll__viewport::-webkit-scrollbar{display:none}.bscroll__viewport.is-dragging{cursor:grabbing}.bscroll__viewport.is-dragging .bscroll__item{pointer-events:none}.bscroll__viewport:focus-visible{box-shadow:inset 0 0 0 2px var(--volt);border-radius:12px}.bscroll__track{position:relative;display:flex;align-items:center;gap:14px;width:max-content;margin:0;padding:12px 10px;list-style:none}.bscroll__cell{flex:0 0 auto;margin:0}.bscroll__item{display:block;border-radius:16px;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.bscroll__item:focus-visible .bscroll__tile{box-shadow:0 0 0 2px var(--volt),0 14px 30px -12px color-mix(in srgb,var(--volt) 55%,transparent)}.bscroll__tile{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;width:150px;height:72px;padding:12px 15px;box-sizing:border-box;border-radius:16px;background:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 26px -16px #000000e6;transition:transform .35s cubic-bezier(.2,.8,.2,1.2),box-shadow .35s,opacity .3s,filter .3s}.bscroll__tile--dark{background:#121212;border-color:var(--line)}.bscroll__logo{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;transform:translate(var(--tx, 0%),var(--ty, 0%)) scale(var(--z, 1));scale:1;transition:scale .45s cubic-bezier(.2,.8,.2,1.15)}.bscroll__name{font-family:var(--font-display);font-size:17px;line-height:1.05;letter-spacing:.06em;text-transform:uppercase;color:#121214;text-align:center;transition:scale .45s cubic-bezier(.2,.8,.2,1.15),color .3s}.bscroll__tile--dark .bscroll__name{color:#f4f4f5}.bscroll__tile:after{content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%,transparent 100%);transform:skew(-18deg) translate(0);opacity:0}.bscroll__tile--dark:after{background:linear-gradient(100deg,transparent 0%,rgba(255,213,31,0) 20%,rgba(255,213,31,.28) 50%,rgba(255,213,31,0) 80%,transparent 100%)}@keyframes bsShine{0%{transform:skew(-18deg) translate(0);opacity:1}to{transform:skew(-18deg) translate(420%);opacity:1}}@keyframes bsRing{0%{box-shadow:0 0 color-mix(in srgb,var(--volt) 70%,transparent),0 10px 26px -16px #000000e6}to{box-shadow:0 0 0 12px color-mix(in srgb,var(--volt) 0%,transparent),0 10px 26px -16px #000000e6}}@media(hover:hover)and (pointer:fine){.bscroll__track:hover .bscroll__tile{opacity:.55;filter:saturate(.6)}.bscroll__track:hover .bscroll__item:hover .bscroll__tile,.bscroll__item:focus-visible .bscroll__tile{opacity:1;filter:none}.bscroll__item:hover .bscroll__tile{transform:translateY(-4px) scale(1.06);box-shadow:0 0 0 2px var(--volt),0 18px 34px -14px color-mix(in srgb,var(--volt) 60%,transparent)}.bscroll__item:hover .bscroll__logo,.bscroll__item:hover .bscroll__name{scale:1.12}.bscroll__item:hover .bscroll__tile:after{animation:bsShine .75s ease-out .05s 1 both}}.bscroll__item:active .bscroll__tile{transform:scale(.94);transition-duration:.12s}.bscroll__item:active .bscroll__logo,.bscroll__item:active .bscroll__name{scale:1.04}.bscroll__item.is-tapped .bscroll__tile{animation:bsRing .55s ease-out 1}@media(max-width:639px){.bscroll{padding-block:10px}.bscroll__viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}.bscroll__track{gap:10px;padding:10px 6px}.bscroll__tile{width:124px;height:60px;padding:10px 12.4px;border-radius:14px}.bscroll__name{font-size:14px}}.bscroll.is-cover{padding-block:4px 12px}.bscroll.is-cover .bscroll__viewport{scroll-snap-type:x mandatory;scroll-behavior:auto;perspective:700px;perspective-origin:50% 35%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}.bscroll.is-cover.is-animating .bscroll__viewport{scroll-snap-type:none}.bscroll.is-cover .bscroll__track{gap:0;padding:26px calc(50% - 50px) 34px;transform-style:preserve-3d}.bscroll.is-cover .bscroll__cell{position:relative;margin-inline:-22px;scroll-snap-align:center;scroll-snap-stop:always;transform-style:preserve-3d}.bscroll.is-cover .bscroll__item{transition:scale .18s cubic-bezier(.3,.7,.3,1)}.bscroll.is-cover .bscroll__tile{width:144px;height:70px;padding:11px 14px;border-radius:18px;transition:box-shadow .5s cubic-bezier(.3,.7,.3,1);will-change:transform;backface-visibility:hidden;transform-origin:50% 60%}.bscroll.is-cover .bscroll__tile:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;border-radius:inherit;background:#0b0b0d;opacity:var(--dim, 0)}.bscroll.is-cover .is-front .bscroll__tile{box-shadow:0 0 0 2px var(--volt),0 22px 36px -14px color-mix(in srgb,var(--volt) 60%,transparent),0 34px 40px -26px #000000e6}.bscroll.is-cover .is-front .bscroll__logo,.bscroll.is-cover .is-front .bscroll__name{scale:1.06}.bscroll.is-cover .bscroll__item:active{scale:.95}@media(prefers-reduced-motion:reduce){.bscroll__tile,.bscroll__logo,.bscroll__name{transition:box-shadow .2s,opacity .2s}.bscroll__item:hover .bscroll__tile,.bscroll__item:active .bscroll__tile{transform:none}.bscroll__item:hover .bscroll__logo,.bscroll__item:hover .bscroll__name,.bscroll__item:active .bscroll__logo{scale:1}.bscroll__tile:after{display:none}.bscroll__item.is-tapped .bscroll__tile{animation:none}.bscroll.is-cover .bscroll__item:active{scale:1}}.no-motion .bscroll__tile:after{display:none}
/*# sourceMappingURL=/cdn/shop/t/21/assets/brand-scroller.css.map */