.bn-cw{--bn-cmp: 0%;--bn-cmp-n: 0;position:relative;display:block;border-radius:var(--bn-r-img);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.bn-cw img{-webkit-user-drag:none;user-drag:none;pointer-events:none}.bn-cw__before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:block;clip-path:inset(0 calc(100% - var(--bn-cmp)) 0 0)}.bn-cw__before .bn-cw__img{width:100%;height:100%;object-fit:contain;object-position:center}.bn-cw__after{position:relative;z-index:0;display:block}.bn-cw__img{display:block;width:100%;height:auto}.bn-cw__before,.bn-cw__bar{transition:clip-path .22s var(--bn-ease-standard),inset-inline-start .22s var(--bn-ease-standard)}.bn-cw.is-dragging .bn-cw__before,.bn-cw.is-dragging .bn-cw__bar,.bn-cw.is-animating .bn-cw__before,.bn-cw.is-animating .bn-cw__bar{transition:none}@media(prefers-reduced-motion:reduce){.bn-cw__before,.bn-cw__bar{transition:none}}.bn-cw__range{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.bn-cw{--bn-cw-knob: 40px;--bn-cw-knob-y: 50%}.bn-cw__bar{position:absolute;inset-block:0;inset-inline-start:calc(var(--bn-cw-knob) / 2 + (100% - var(--bn-cw-knob)) * var(--bn-cmp-n));z-index:3;width:1px;background:var(--bn-fulvic);opacity:.55;pointer-events:none;translate:-.5px 0}.bn-cw__knob{position:absolute;inset-block-start:var(--bn-cw-knob-y);inset-inline-start:50%;width:var(--bn-cw-knob);height:var(--bn-cw-knob);border:1px solid var(--bn-fulvic);border-radius:50%;background:var(--bn-paper);box-shadow:0 1px 10px #1b211d1f;translate:-50% -50%}.bn-cw__knob:before,.bn-cw__knob:after{content:"";position:absolute;inset-block-start:50%;width:6px;height:6px;border-top:1px solid var(--bn-fulvic);border-right:1px solid var(--bn-fulvic)}.bn-cw__knob:before{inset-inline-start:10px;rotate:-135deg;translate:0 -50%}.bn-cw__knob:after{inset-inline-end:10px;rotate:45deg;translate:0 -50%}.bn-cw__range:focus-visible~.bn-cw__bar .bn-cw__knob{outline:2px solid var(--bn-fulvic);outline-offset:3px}.bn-cw__tag{position:absolute;inset-block-start:12px;z-index:4;padding:5px 11px;border-radius:var(--bn-r-pill);background:#f5f4f0e6;border:1px solid var(--bn-hairline-soft);font-family:var(--bn-sans);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bn-ink);pointer-events:none}.bn-cw__tag--before{inset-inline-start:12px;opacity:clamp(0,calc((var(--bn-cmp-n) - .5) * 10),1)}.bn-cw__tag--after{inset-inline-end:12px;opacity:clamp(0,calc((.5 - var(--bn-cmp-n)) * 10),1)}.bn-cw__pin{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--bn-mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bn-ink-soft);background:#f5f4f0d1;padding:3px 8px;border-radius:var(--bn-r-pill);white-space:nowrap}.bn-cw__pin--before{opacity:clamp(0,calc((var(--bn-cmp-n) - .5) * 10),1)}.bn-cw__pin--after{opacity:clamp(0,calc((.5 - var(--bn-cmp-n)) * 10),1)}.bn-cw__pin--narrow{display:none}@media(max-width:749px){.bn-cw__pin--wide{display:none}.bn-cw__pin--narrow{display:block}}.bn-cw__hint{display:block;margin-top:12px;font-family:var(--bn-sans);font-size:.8125rem;letter-spacing:.04em;color:var(--bn-ink-soft);text-align:center}.bn-cw__legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:12px 0 0;padding:0}.bn-cw__legend li{display:inline-flex;align-items:center;gap:8px;font-family:var(--bn-sans);font-size:.8125rem;color:var(--bn-muted)}.bn-cw__swatch{width:12px;height:12px;border-radius:50%;flex:0 0 auto;background:var(--bn-muted-soft)}.bn-cw__swatch--mineral{background:#3e5148}.bn-cw__swatch--carrier{background:var(--bn-fulvic)}.bn-cw__swatch--cell{background:var(--bn-paper-deep);border:1px solid var(--bn-hairline)}@media(max-width:749px){.bn-cw__tag{font-size:.625rem;padding:4px 9px}.bn-cw{--bn-cw-knob: 44px}.bn-cw__pin{font-size:9px;padding:2px 6px;letter-spacing:.08em}.bn-cw__legend{gap:6px 16px}.bn-cw__legend li{font-size:.75rem}}@media(max-width:749px){.bn-cw--no-mobile{cursor:auto;touch-action:auto}.bn-cw--no-mobile .bn-cw__before,.bn-cw--no-mobile .bn-cw__bar,.bn-cw--no-mobile .bn-cw__tag,.bn-cw--no-mobile .bn-cw__pin,.bn-cw--no-mobile .bn-cw__range{display:none}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/bn-compare.css.map */
