.ocs-ba__head{max-width:58ch;margin:0 0 var(--ocs-s3)}.ocs-ba__title{font-size:clamp(2.56rem,3.2vw,3.84rem);margin:0 0 var(--ocs-s1)}.ocs-ba__intro{margin:0;line-height:1.65;color:var(--ocs-ink, #2D211B)}.ocs-ba__stage{--pos: 50;position:relative;max-width:920px;margin:0 auto;border-radius:var(--ocs-radius-lg);overflow:hidden;background:var(--ocs-surface-alt, #F5EFE4);box-shadow:0 26px 52px -34px #2d211bbf;touch-action:pan-y;cursor:ew-resize}.ocs-ba__img{display:block;width:100%;height:auto}.ocs-ba__after{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 calc((100 - var(--pos)) * 1%) 0 0)}.ocs-ba__after .ocs-ba__img{height:100%;object-fit:cover}.ocs-ba__line{position:absolute;top:0;bottom:0;left:calc(var(--pos) * 1%);width:2px;margin-left:-1px;background:var(--ocs-ivory, #FDFEF9);box-shadow:0 0 0 1px #2d211b40;pointer-events:none}.ocs-ba__grip{position:absolute;top:50%;left:calc(var(--pos) * 1%);translate:-50% -50%;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--ocs-ivory, #FDFEF9);color:var(--ocs-espresso, #463324);box-shadow:0 10px 24px -10px #2d211bcc;pointer-events:none}.ocs-ba__grip svg{width:22px;height:22px}.ocs-ba__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}.ocs-ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:48px}.ocs-ba__range::-moz-range-thumb{width:48px;height:48px;border:0;background:transparent}.ocs-ba__stage:focus-within .ocs-ba__grip{outline:3px solid var(--ocs-espresso, #463324);outline-offset:3px}.ocs-ba__tag{position:absolute;top:var(--ocs-s2);z-index:2;padding:.4rem .96rem;border-radius:999px;font-size:1.2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#2d211bb8;color:var(--ocs-ivory, #FDFEF9);pointer-events:none;transition:opacity .2s var(--ocs-ease)}.ocs-ba__tag--before{right:var(--ocs-s2)}.ocs-ba__tag--after{left:var(--ocs-s2)}.ocs-ba__tag--after{opacity:clamp(0,(var(--pos) - 12) / 10,1)}.ocs-ba__tag--before{opacity:clamp(0,(88 - var(--pos)) / 10,1)}.ocs-ba__hint{margin:var(--ocs-s2) 0 0;text-align:center;font-size:1.28rem;color:var(--ocs-ink, #2D211B);opacity:.72}.ocs-ba__stage.is-nudging{animation:ocs-ba-nudge 1.9s var(--ocs-ease) 1}@keyframes ocs-ba-nudge{0%{--pos: 50}28%{--pos: 76}64%{--pos: 28}to{--pos: 50}}@property --pos{syntax: "<number>"; inherits: true; initial-value: 50;}@media(prefers-reduced-motion:reduce){.ocs-ba__stage.is-nudging{animation:none}.ocs-ba__tag{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/ocs-before-after.css.map */