@property --before-after-position{syntax: "<percentage>"; inherits: true; initial-value: 50%;}.before-after{display:block;min-width:0;margin-bottom:var(--before-after-spacing, 0)}.before-after__frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:var(--before-after-ratio, 4 / 3);border:var(--media-container-border, none);border-radius:var(--before-after-radius, var(--media-container-radius, 0));box-shadow:var(--media-container-shadow, none);background:rgba(var(--color-foreground),.06);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.before-after--vertical .before-after__frame{cursor:ns-resize;touch-action:auto}.before-after--small .before-after__frame{aspect-ratio:auto;height:24rem}.before-after--medium .before-after__frame{aspect-ratio:auto;height:32rem}.before-after--large .before-after__frame{aspect-ratio:auto;height:40rem}@media screen and (min-width:750px){.before-after--small .before-after__frame{height:32rem}.before-after--medium .before-after__frame{height:48rem}.before-after--large .before-after__frame{height:64rem}}.before-after__layer{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__layer img,.before-after__layer .placeholder-svg{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__layer--before{z-index:1;clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}.before-after--vertical .before-after__layer--before{clip-path:inset(0 0 calc(100% - var(--before-after-position)) 0)}.before-after__label{position:absolute;top:1.2rem;padding:.5rem 1rem;border-radius:var(--buttons-radius, 2rem);background:#0000008c;color:#fff;font-size:1.2rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.before-after__label--before{left:1.2rem}.before-after__label--after{right:1.2rem}.before-after--labels-bottom .before-after__label{top:auto;bottom:1.2rem}.before-after--vertical .before-after__label--before{top:1.2rem;bottom:auto}.before-after--vertical .before-after__label--after{top:auto;right:auto;bottom:1.2rem;left:1.2rem}.before-after__handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--before-after-position);width:0;pointer-events:none}.before-after__handle:before{content:"";position:absolute;top:0;bottom:0;left:-.1rem;width:.2rem;background:var(--before-after-line, #fff);box-shadow:0 0 .6rem #00000040}.before-after--vertical .before-after__handle{top:var(--before-after-position);right:0;bottom:auto;left:0;width:auto;height:0}.before-after--vertical .before-after__handle:before{top:-.1rem;right:0;bottom:auto;left:0;width:auto;height:.2rem}.before-after__knob{position:absolute;top:50%;left:0;display:grid;place-items:center;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;border-radius:50%;background:var(--before-after-knob, #fff);box-shadow:0 .2rem 1.2rem #00000038;color:var(--before-after-arrows, #121212);pointer-events:auto;touch-action:none;transition:transform .2s ease}.before-after--vertical .before-after__knob{top:0;left:50%}.before-after__knob svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.before-after--vertical .before-after__knob svg{transform:rotate(90deg)}.before-after[data-dragging] .before-after__knob{transform:scale(.92)}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}.before-after:has(.before-after__range:focus-visible) .before-after__knob{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.3rem}@media(prefers-reduced-motion:no-preference){.before-after[data-hinting] .before-after__frame{animation:before-after-hint 1.6s cubic-bezier(.45,0,.25,1)}}@keyframes before-after-hint{30%{--before-after-position: clamp(0%, calc(var(--before-after-start, 50%) + 12%), 100%)}65%{--before-after-position: clamp(0%, calc(var(--before-after-start, 50%) - 12%), 100%)}}.before-after{position:relative}.before-after:has(.before-after__ticket){margin-bottom:calc(var(--before-after-spacing, 0px) + 36px)}.before-after__ticket{position:absolute;z-index:4;left:14px;right:14px;bottom:-34px;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;background:#fffdf8;color:#283454;border-radius:20px;box-shadow:0 0 0 1px #28345414,0 14px 28px -10px #28345473;font-family:var(--font-body-family, inherit);text-align:left}.before-after__ticket-disc{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ticket-bg, #e7be55)}.before-after__ticket-img{width:70%;height:auto;transform:rotate(-10deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}.before-after__ticket-txt{display:flex;flex:1;flex-direction:column;min-width:0}.before-after__ticket-txt strong{font-size:17px;font-weight:600;line-height:1.15}.before-after__ticket-txt span{font-size:13px;color:#5a6178}.before-after__ticket-val{flex:none;display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;justify-content:center;gap:4px;padding-left:14px;border-left:2px dashed #e2dbd1}.before-after__ticket-old{font-size:13px;color:#5a6178;text-decoration:line-through}.before-after__ticket-chip{padding:4px 10px;border-radius:99px;background:#283454;color:#fffdf8;font-size:11px;font-weight:700;letter-spacing:.1em}@media(prefers-reduced-motion:no-preference){.before-after__ticket{animation:before-after-ticket-in .5s cubic-bezier(.2,.8,.2,1) .3s both}}@keyframes before-after-ticket-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-before-after.css.map */