.luvia-before-after__grid{display:flex;flex-direction:column;gap:var(--luvia-space-xl)}.luvia-before-after__content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.luvia-before-after__title{margin:0 0 var(--luvia-space-md) 0}.luvia-before-after__subtitle{margin:0;color:rgb(var(--luvia-slate));max-width:48ch}.luvia-before-after__compare{position:relative;width:100%;overflow:hidden;border-radius:var(--luvia-radius-lg);background-color:rgb(var(--luvia-ivory));-webkit-user-select:none;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 10px 40px rgba(var(--luvia-charcoal),.08)}.luvia-before-after__image--before{position:relative;width:100%;height:auto;display:block;pointer-events:none}.luvia-before-after__after-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 0 0 var(--luvia-ba-position, 50%));-webkit-clip-path:inset(0 0 0 var(--luvia-ba-position, 50%));will-change:clip-path}.luvia-before-after__image--after{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;display:block}.luvia-before-after__label{position:absolute;bottom:1.6rem;padding:.6rem 1.2rem;font-family:var(--font-body-family);font-size:var(--luvia-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--luvia-tracking-wider);border-radius:var(--luvia-radius-pill);background:rgba(var(--luvia-charcoal),.78);color:rgb(var(--luvia-white));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;z-index:2}.luvia-before-after__label--before{left:1.6rem}.luvia-before-after__label--after{right:1.6rem;background:rgba(var(--luvia-aqua-dark),.88)}.luvia-before-after__handle{position:absolute;top:0;bottom:0;left:var(--luvia-ba-position, 50%);width:0;pointer-events:none;z-index:3;will-change:left}.luvia-before-after__handle-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgb(var(--luvia-white));transform:translate(-50%);box-shadow:0 0 12px rgba(var(--luvia-charcoal),.35)}.luvia-before-after__handle-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4.8rem;height:4.8rem;padding:0;border:2px solid rgb(var(--luvia-white));border-radius:50%;background:rgb(var(--luvia-aqua));color:rgb(var(--luvia-charcoal));cursor:ew-resize;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(var(--luvia-charcoal),.25);transition:transform var(--luvia-duration-default) var(--luvia-easing),background-color var(--luvia-duration-default) var(--luvia-easing);pointer-events:none}.luvia-before-after__handle-button svg{width:2rem;height:2rem}.luvia-before-after__compare:hover .luvia-before-after__handle-button,.luvia-before-after__compare:focus-within .luvia-before-after__handle-button{transform:translate(-50%,-50%) scale(1.08);background:rgb(var(--luvia-aqua-dark));color:rgb(var(--luvia-white))}.luvia-before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;z-index:4}.luvia-before-after__range:focus-visible{outline:none}.luvia-before-after__range:focus-visible~.luvia-before-after__handle .luvia-before-after__handle-button{outline:3px solid rgb(var(--luvia-aqua));outline-offset:4px}.luvia-before-after__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4.8rem;height:4.8rem;background:transparent;cursor:ew-resize}.luvia-before-after__range::-moz-range-thumb{width:4.8rem;height:4.8rem;background:transparent;border:0;cursor:ew-resize}@media screen and (min-width:750px){.luvia-before-after__grid{gap:var(--luvia-space-2xl)}.luvia-before-after__label{font-size:var(--luvia-text-sm);padding:.8rem 1.6rem;bottom:2rem}.luvia-before-after__label--before{left:2rem}.luvia-before-after__label--after{right:2rem}}@media screen and (min-width:990px){.luvia-before-after__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--luvia-space-2xl)}.luvia-before-after__content{padding-right:var(--luvia-space-xl)}.luvia-before-after__visual{display:flex;justify-content:center}.luvia-before-after__compare{width:100%;max-width:56rem}.luvia-before-after__handle-button{width:5.6rem;height:5.6rem}.luvia-before-after__handle-button svg{width:2.4rem;height:2.4rem}}@media(prefers-reduced-motion:reduce){.luvia-before-after__handle,.luvia-before-after__after-wrapper,.luvia-before-after__handle-button{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/luvia-before-after.css.map */