.sugar-before-after{--ba-w: var(--ba-w-m);--ba-handle-color: var(--ba-handle, rgb(var(--color-foreground)));--ba-edge: clamp(8px, 3vw, 16px);position:relative;z-index:1;width:var(--ba-w);margin:var(--ba-mt) auto var(--ba-mb);overflow:hidden;border:var(--ba-border);border-radius:var(--ba-radius)}.sugar-before-after--shadow-subtle{box-shadow:0 2px 5px #0000001a,0 1px 2px #00000014}.sugar-before-after--shadow-medium{box-shadow:0 4px 10px #0000001f,0 2px 4px #00000014}@media screen and (min-width:750px){.sugar-before-after{--ba-w: var(--ba-w-d)}}@media screen and (max-width:749px){.sugar-before-after--full-m{width:100vw;position:relative;margin-inline:calc(50% - 50vw);border-radius:0}}.sugar-before-after .sugar-before-after__container{position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sugar-before-after[data-mode=drag] .sugar-before-after__container{cursor:ew-resize}.sugar-before-after[data-mode=drag][data-direction=vertical] .sugar-before-after__container{cursor:ns-resize}.sugar-before-after .sugar-before-after__container:before{content:"";display:block;padding-bottom:var(--ba-pad)}.sugar-before-after .sugar-before-after__before,.sugar-before-after .sugar-before-after__after{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.sugar-before-after .sugar-before-after__before{z-index:1}.sugar-before-after .sugar-before-after__after{z-index:2}.sugar-before-after--h .sugar-before-after__after{clip-path:inset(-1px -1px -1px var(--ba-start))}.sugar-before-after--v .sugar-before-after__after{clip-path:inset(var(--ba-start) -1px -1px -1px)}.sugar-before-after .sugar-before-after__before img,.sugar-before-after .sugar-before-after__before svg,.sugar-before-after .sugar-before-after__after img,.sugar-before-after .sugar-before-after__after svg{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.sugar-before-after .sugar-before-after__handle{position:absolute;z-index:10;background:var(--ba-handle-color);display:flex;align-items:center;justify-content:center}.sugar-before-after--h .sugar-before-after__handle{top:0;bottom:0;left:var(--ba-start);width:var(--ba-line);transform:translate(-50%);cursor:ew-resize}.sugar-before-after--v .sugar-before-after__handle{left:0;right:0;top:var(--ba-start);height:var(--ba-line);transform:translateY(-50%);cursor:ns-resize}.sugar-before-after .sugar-before-after__handle:before{content:"";position:absolute}.sugar-before-after--h .sugar-before-after__handle:before{top:0;bottom:0;left:-20px;right:-20px}.sugar-before-after--v .sugar-before-after__handle:before{left:0;right:0;top:-20px;bottom:-20px}.sugar-before-after .sugar-before-after__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background:var(--ba-handle-color);color:var(--ba-grip-color, rgb(var(--color-background)));width:var(--ba-grip-w, auto);height:var(--ba-grip-h, auto);border-radius:var(--ba-grip-radius, 0px);box-shadow:0 2px 8px #0003}.sugar-before-after--line .sugar-before-after__grip{display:none}.sugar-before-after .sugar-before-after__grip svg{width:60%;height:60%}.sugar-before-after .sugar-before-after__labels{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.sugar-before-after--nolabels .sugar-before-after__labels{display:none}.sugar-before-after .sugar-before-after__label{position:absolute;font-size:clamp(10px,2.5vw,13px);letter-spacing:.05em;white-space:nowrap;color:var(--ba-label-color)}.sugar-before-after--label-tshadow .sugar-before-after__label{text-shadow:0 1px 2px rgba(0,0,0,.3)}.sugar-before-after--label-badge .sugar-before-after__label{background:var(--ba-label-bg);padding:clamp(4px,1.5vw,7px) clamp(8px,2.5vw,14px) clamp(3px,1.25vw,6px);border-radius:var(--ba-label-radius)}.sugar-before-after--label-bshadow .sugar-before-after__label{box-shadow:0 2px 4px #0000001a}.sugar-before-after .sugar-before-after__label--tl{top:var(--ba-edge);left:var(--ba-edge)}.sugar-before-after .sugar-before-after__label--tr{top:var(--ba-edge);right:var(--ba-edge)}.sugar-before-after .sugar-before-after__label--bl{bottom:var(--ba-edge);left:var(--ba-edge)}.sugar-before-after .sugar-before-after__label--br{bottom:var(--ba-edge);right:var(--ba-edge)}.sugar-before-after[data-mode=toggle]{cursor:pointer}.sugar-before-after--tg-fade[data-mode=toggle] .sugar-before-after__after{clip-path:none;opacity:0;transition:opacity var(--ba-dur) ease}.sugar-before-after--tg-reveal[data-mode=toggle] .sugar-before-after__after{clip-path:var(--ba-reveal);transition:clip-path var(--ba-dur) ease}.sugar-before-after--tg-slide[data-mode=toggle] .sugar-before-after__after{clip-path:none;opacity:0;transform:translate(10%);transition:opacity var(--ba-dur) ease,transform var(--ba-dur) ease}.sugar-before-after--tg-zoom[data-mode=toggle] .sugar-before-after__after{clip-path:none;opacity:0;transform:scale(1.05);transition:opacity var(--ba-dur) ease,transform var(--ba-dur) ease}.sugar-before-after--tg-blur[data-mode=toggle] .sugar-before-after__after{clip-path:none;opacity:0;filter:blur(8px);transition:opacity var(--ba-dur) ease,filter var(--ba-dur) ease}.sugar-before-after--tg-fade[data-mode=toggle][data-ba-toggled] .sugar-before-after__after{opacity:1}.sugar-before-after--tg-reveal[data-mode=toggle][data-ba-toggled] .sugar-before-after__after{clip-path:inset(-1px -1px -1px -1px)}.sugar-before-after--tg-slide[data-mode=toggle][data-ba-toggled] .sugar-before-after__after{opacity:1;transform:translate(0)}.sugar-before-after--tg-zoom[data-mode=toggle][data-ba-toggled] .sugar-before-after__after{opacity:1;transform:scale(1)}.sugar-before-after--tg-blur[data-mode=toggle][data-ba-toggled] .sugar-before-after__after{opacity:1;filter:blur(0)}.sugar-before-after[data-mode=toggle] .sugar-before-after__handle{display:none}.sugar-before-after[data-mode=toggle] .sugar-before-after__label{transition:opacity var(--ba-dur) ease}.sugar-before-after[data-mode=toggle] .sugar-before-after__label--after,.sugar-before-after[data-mode=toggle][data-ba-toggled] .sugar-before-after__label--before{opacity:0}.sugar-before-after[data-mode=toggle][data-ba-toggled] .sugar-before-after__label--after{opacity:1}.sugar-before-after[data-mode=toggle] .sugar-before-after__label--t-tl{top:var(--ba-edge);left:var(--ba-edge);bottom:auto;right:auto}.sugar-before-after[data-mode=toggle] .sugar-before-after__label--t-tr{top:var(--ba-edge);right:var(--ba-edge);bottom:auto;left:auto}.sugar-before-after[data-mode=toggle] .sugar-before-after__label--t-bl{bottom:var(--ba-edge);left:var(--ba-edge);top:auto;right:auto}.sugar-before-after[data-mode=toggle] .sugar-before-after__toggle-hint{position:absolute;left:50%;transform:translate(-50%);z-index:10;background:var(--ba-label-bg);color:var(--ba-label-color);padding:clamp(5px,1.5vw,8px) clamp(10px,3vw,16px);border-radius:100px;font-size:clamp(10px,2.5vw,13px);box-shadow:0 2px 8px #00000026;pointer-events:none}.sugar-before-after--hint-top[data-mode=toggle] .sugar-before-after__toggle-hint{top:var(--ba-edge)}.sugar-before-after--hint-bottom[data-mode=toggle] .sugar-before-after__toggle-hint{bottom:var(--ba-edge)}.sugar-before-after--hint-pulse[data-mode=toggle] .sugar-before-after__toggle-hint{animation:sugar-before-after-hint-pulse 2s ease-in-out infinite}.sugar-before-after--hint-bounce[data-mode=toggle] .sugar-before-after__toggle-hint{animation:sugar-before-after-hint-bounce 1.5s ease-in-out infinite}@keyframes sugar-before-after-hint-pulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}}@keyframes sugar-before-after-hint-bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}.sugar-before-after[data-mode=hover] .sugar-before-after__handle,.sugar-before-after[data-mode=scroll] .sugar-before-after__handle{pointer-events:none}@media screen and (max-width:749px){.sugar-before-after--nogrip-m .sugar-before-after__grip{display:none}}.sugar-before-after--animate-fade{opacity:0;transition:opacity .6s ease}.sugar-before-after--animate-fade[data-ba-visible]{opacity:1}.sugar-before-after--animate-slide{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.sugar-before-after--animate-slide[data-ba-visible]{opacity:1;transform:translateY(0)}.sugar-before-after--animate-scale{opacity:0;transform:scale(.95);transition:opacity .6s ease,transform .6s ease}.sugar-before-after--animate-scale[data-ba-visible]{opacity:1;transform:scale(1)}@keyframes sugar-before-after-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}@keyframes sugar-before-after-bounce{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 5px))}}.sugar-before-after__handle--hint-pulse .sugar-before-after__grip{animation:sugar-before-after-pulse 2s ease-in-out infinite}.sugar-before-after__handle--hint-bounce .sugar-before-after__grip{animation:sugar-before-after-bounce 1.5s ease-in-out infinite}@keyframes sugar-before-after-intro-h{0%{left:50%}30%{left:35%}60%{left:65%}to{left:var(--ba-start)}}@keyframes sugar-before-after-intro-v{0%{top:50%}30%{top:35%}60%{top:65%}to{top:var(--ba-start)}}.sugar-before-after--h[data-ba-intro] .sugar-before-after__handle{animation:sugar-before-after-intro-h 1.2s ease-out forwards}.sugar-before-after--v[data-ba-intro] .sugar-before-after__handle{animation:sugar-before-after-intro-v 1.2s ease-out forwards}@media screen and (min-width:750px){.sugar-before-after--dev-m{display:none}}@media screen and (max-width:749px){.sugar-before-after--dev-d{display:none}}.sugar-before-after__empty{--ba-w: var(--ba-w-m);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;border:2px dashed rgba(var(--color-foreground),.2);border-radius:var(--ba-radius);aspect-ratio:1 / 1;width:var(--ba-w);margin:var(--ba-mt) auto var(--ba-mb)}@media screen and (min-width:750px){.sugar-before-after__empty{--ba-w: var(--ba-w-d)}}.sugar-before-after__empty .sugar-before-after__empty-icon{width:48px;height:48px;opacity:.4;margin-bottom:8px}.sugar-before-after__empty .sugar-before-after__empty-title{margin:0;font-size:14px;font-weight:600;font-style:normal;color:rgba(var(--color-foreground),.6)}.sugar-before-after__empty .sugar-before-after__empty-subtitle{margin:0;font-size:13px;font-style:italic;color:rgba(var(--color-foreground),.4)}.sugar-before-after[data-mode=none] .sugar-before-after__static-grid{display:flex;gap:var(--ba-gap)}.sugar-before-after--st-v[data-mode=none] .sugar-before-after__static-grid{flex-direction:column}.sugar-before-after--st-h[data-mode=none] .sugar-before-after__static-grid{flex-direction:row}@media screen and (max-width:749px){.sugar-before-after--st-stack[data-mode=none] .sugar-before-after__static-grid{flex-direction:column}}.sugar-before-after[data-mode=none] .sugar-before-after__static-item{position:relative;overflow:hidden}.sugar-before-after--st-h[data-mode=none] .sugar-before-after__static-item{min-width:0}.sugar-before-after--st-h[data-mode=none] .sugar-before-after__static-item:first-child{flex:var(--ba-split-a)}.sugar-before-after--st-h[data-mode=none] .sugar-before-after__static-item:last-child{flex:var(--ba-split-b)}.sugar-before-after[data-mode=none] .sugar-before-after__static-media{position:relative;width:100%;overflow:hidden}.sugar-before-after--st-gap[data-mode=none] .sugar-before-after__static-media{border-radius:var(--ba-radius)}.sugar-before-after--st-pad[data-mode=none] .sugar-before-after__static-media{padding-bottom:var(--ba-pad)}.sugar-before-after--st-fill[data-mode=none] .sugar-before-after__static-media{height:100%}.sugar-before-after--st-fill[data-mode=none] .sugar-before-after__static-grid{aspect-ratio:var(--ba-ar)}.sugar-before-after--st-fill[data-mode=none] .sugar-before-after__static-item{min-height:0;min-width:0}.sugar-before-after--st-fill-v[data-mode=none] .sugar-before-after__static-item{flex:1}.sugar-before-after--st-fill[data-mode=none] .sugar-before-after__static-media img,.sugar-before-after--st-fill[data-mode=none] .sugar-before-after__static-media svg{display:block;width:100%;height:100%;object-fit:cover}.sugar-before-after--st-orig[data-mode=none] .sugar-before-after__static-media img,.sugar-before-after--st-orig[data-mode=none] .sugar-before-after__static-media svg{display:block;width:100%}.sugar-before-after--st-orig[data-mode=none] .sugar-before-after__static-media img{height:auto}.sugar-before-after--st-fit[data-mode=none] .sugar-before-after__static-media img,.sugar-before-after--st-fit[data-mode=none] .sugar-before-after__static-media svg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--ba-fit);display:block}.sugar-before-after[data-mode=none] .sugar-before-after__label{z-index:2;pointer-events:none}
/*# sourceMappingURL=/cdn/shop/t/14/assets/block-before-after.css.map */