.softness-finder{--sf-cream: #eae3db;--sf-purple: #2c2455;--sf-red: #f80505;--sf-purple-rgb: 44, 36, 85;--sf-red-rgb: 248, 5, 5;--sf-thumb: 2.4rem;--sf-pct: 50;--sf-panel-pad-bottom: 2.8rem;--sf-pos: calc(var(--sf-pct) * 1% + (.5 - var(--sf-pct) / 100) * var(--sf-thumb));display:block}.softness-finder__shell{border:.1rem solid rgba(var(--sf-purple-rgb),.12);border-radius:1.6rem;background:rgb(var(--color-background));box-shadow:0 1rem 3rem rgba(var(--sf-purple-rgb),.1);overflow:hidden}.softness-finder__panel{position:relative;padding:2.4rem 2.4rem var(--sf-panel-pad-bottom);background:var(--sf-cream);border-bottom:.1rem solid rgba(var(--sf-purple-rgb),.12)}.softness-finder__glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 12% 50%,rgba(var(--sf-purple-rgb),.07),rgba(var(--sf-purple-rgb),0) 45%),radial-gradient(circle at 88% 15%,rgba(var(--sf-red-rgb),.09),rgba(var(--sf-red-rgb),0) 38%);pointer-events:none}.softness-finder__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.softness-finder__title{margin:0;font-size:clamp(2rem,3vw,2.6rem);font-weight:700;line-height:1.15;color:var(--sf-purple)}.softness-finder__subtitle{max-width:46rem;font-size:1.35rem;line-height:1.5;color:rgba(var(--sf-purple-rgb),.78)}.softness-finder__scale{position:relative;z-index:1;margin:2rem auto 0;max-width:62rem}.softness-finder__scale-labels{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:1.15rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(var(--sf-purple-rgb),.55)}.softness-finder__slider{position:relative;padding-top:3.6rem}.softness-finder__marker{position:absolute;top:0;left:var(--sf-pos);display:flex;align-items:center;gap:.55rem;max-width:min(24rem,100%);white-space:nowrap;transform:translate(-50%);transition:left .12s ease-out;pointer-events:none;z-index:2}.softness-finder__marker--start{transform:translate(-.6rem)}.softness-finder__marker--end{transform:translate(calc(-100% + .6rem))}.softness-finder__value{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:4.4rem;padding:.5rem .7rem;border-radius:.6rem;background:var(--sf-purple);color:var(--sf-cream);font-size:1.25rem;font-weight:700;line-height:1}.softness-finder__level{font-size:1.3rem;font-weight:700;color:var(--sf-purple);line-height:1.3;overflow:hidden;text-overflow:ellipsis}.softness-finder__track{position:relative;height:.6rem;border-radius:999px;background:#d5cec6}.softness-finder__ticks{position:absolute;top:calc(100% + .5rem);height:.45rem;inset-inline:calc(var(--sf-thumb) / 2);background-image:repeating-linear-gradient(to right,rgba(var(--sf-purple-rgb),.28) 0 .1rem,transparent .1rem 5%);pointer-events:none}.softness-finder__fill{position:absolute;inset-block:0;left:0;width:var(--sf-pos);border-radius:999px;background:linear-gradient(90deg,rgba(var(--sf-purple-rgb),.55) 0%,var(--sf-purple) 100%);transition:width .12s ease-out}.softness-finder__thumb{position:absolute;top:50%;left:var(--sf-pos);width:1.8rem;height:1.8rem;border-radius:50%;background:var(--sf-red);border:.35rem solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 .2rem .8rem rgba(var(--sf-red-rgb),.4);transition:left .12s ease-out,transform .12s ease-out}.softness-finder__slider--dragging .softness-finder__marker,.softness-finder__slider--dragging .softness-finder__fill,.softness-finder__slider--dragging .softness-finder__thumb,.softness-finder__slider--intro .softness-finder__marker,.softness-finder__slider--intro .softness-finder__fill,.softness-finder__slider--intro .softness-finder__thumb{transition:none}.softness-finder__slider--intro .softness-finder__thumb{animation:sf-intro-thumb .95s ease-out}.softness-finder__slider--intro .softness-finder__marker{animation:sf-intro-marker .95s ease-out}@keyframes sf-intro-thumb{0%{scale:.4;opacity:0}25%{scale:1.25;opacity:1}to{scale:1;opacity:1}}@keyframes sf-intro-marker{0%,15%{opacity:0}to{opacity:1}}.softness-finder__slider--dragging .softness-finder__thumb{transform:translate(-50%,-50%) scale(1.15)}.softness-finder__range{position:absolute;left:0;right:0;bottom:-1.4rem;width:100%;height:3.4rem;margin:0;padding:0;background:transparent;opacity:0;cursor:grab;z-index:3;-webkit-appearance:none;appearance:none}.softness-finder__range:active{cursor:grabbing}.softness-finder__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--sf-thumb);height:var(--sf-thumb);border:0;border-radius:50%;background:#000}.softness-finder__range::-moz-range-thumb{width:var(--sf-thumb);height:var(--sf-thumb);border:0;border-radius:50%;background:#000}.softness-finder__slider:has(.softness-finder__range:focus-visible) .softness-finder__thumb{box-shadow:0 0 0 .35rem rgba(var(--sf-purple-rgb),.45)}.softness-finder__thumb:before,.softness-finder__thumb:after{content:"";position:absolute;top:50%;width:.55rem;height:.55rem;border:solid rgba(var(--sf-purple-rgb),.7);border-width:.2rem .2rem 0 0;opacity:0;translate:0 -50%;pointer-events:none}.softness-finder__thumb:before{right:calc(100% + .6rem);rotate:-135deg}.softness-finder__thumb:after{left:calc(100% + .6rem);rotate:45deg}.softness-finder--hint .softness-finder__thumb:before{animation:sf-hint-left 2.4s ease-out 5}.softness-finder--hint .softness-finder__thumb:after{animation:sf-hint-right 2.4s ease-out 5}.softness-finder--hint .softness-finder__thumb{animation:sf-hint-pulse 2.4s ease-out 5}@keyframes sf-hint-pulse{0%,45%,to{scale:1}18%{scale:1.22}}@keyframes sf-hint-left{0%,to{opacity:0;translate:.35rem -50%}22%{opacity:1;translate:0 -50%}50%{opacity:0;translate:-.5rem -50%}}@keyframes sf-hint-right{0%,to{opacity:0;translate:-.35rem -50%}22%{opacity:1;translate:0 -50%}50%{opacity:0;translate:.5rem -50%}}.softness-finder__hint{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.4rem 0 0;font-size:1.15rem;font-weight:600;letter-spacing:.03em;color:rgba(var(--sf-purple-rgb),.62);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;pointer-events:none}.softness-finder--hint .softness-finder__hint{opacity:1;visibility:visible}.softness-finder__hint-icon{position:relative;display:inline-block;width:3rem;height:1rem;flex-shrink:0}.softness-finder__hint-dot{position:absolute;top:50%;left:50%;width:.7rem;height:.7rem;border-radius:50%;background:var(--sf-red);translate:-50% -50%}.softness-finder__hint-chevron{position:absolute;top:50%;width:.4rem;height:.4rem;border:solid currentColor;border-width:.15rem .15rem 0 0;translate:0 -50%}.softness-finder__hint-chevron--left{left:.2rem;rotate:-135deg}.softness-finder__hint-chevron--right{right:.2rem;rotate:45deg}.softness-finder--hint .softness-finder__hint-chevron--left{animation:sf-hint-icon-left 2.4s ease-in-out infinite}.softness-finder--hint .softness-finder__hint-chevron--right{animation:sf-hint-icon-right 2.4s ease-in-out infinite}@keyframes sf-hint-icon-left{0%,60%,to{opacity:.35;translate:.15rem -50%}30%{opacity:1;translate:-.15rem -50%}}@keyframes sf-hint-icon-right{0%,60%,to{opacity:.35;translate:-.15rem -50%}30%{opacity:1;translate:.15rem -50%}}.softness-finder__pointer{position:absolute;left:50%;bottom:calc((var(--sf-panel-pad-bottom) + .75rem) * -1);width:1.5rem;height:1.5rem;background:var(--sf-cream);border-right:.1rem solid rgba(var(--sf-purple-rgb),.12);border-bottom:.1rem solid rgba(var(--sf-purple-rgb),.12);transform:translate(-50%) rotate(45deg);pointer-events:none;z-index:2}.softness-finder__results{padding:2.6rem 2rem 2.4rem}.softness-finder__count{margin:0 0 1.6rem;min-height:1.4em;text-align:center;font-size:1.4rem;font-weight:600;color:rgb(var(--color-foreground))}.softness-finder__empty{margin:0 0 1.6rem;padding:2.4rem 2rem;border-radius:1rem;background:rgba(var(--sf-purple-rgb),.04);text-align:center;font-size:1.4rem;color:rgba(var(--color-foreground),.75)}.softness-finder__grid{margin-bottom:0}.softness-finder__item[hidden],.softness-finder__item.softness-finder__item--hidden{display:none!important}.softness-finder__item{transition:opacity .22s ease,transform .22s ease;transition-delay:min(var(--sf-index, 0) * 30ms,.21s)}.softness-finder__grid--leaving .softness-finder__item{opacity:0;transform:translateY(.8rem) scale(.97);transition-delay:0s}.softness-finder__grid--entering .softness-finder__item{opacity:0;transform:translateY(-.9rem) scale(.97);transition:none}.softness-finder__grid--resizing{overflow:hidden;transition:height .3s cubic-bezier(.25,.1,.25,1)}.softness-finder__debug{margin-top:2.4rem;padding:1.2rem 1.6rem;border:.1rem dashed rgba(var(--sf-purple-rgb),.3);border-radius:.8rem;font-size:1.2rem;color:rgba(var(--color-foreground),.8)}.softness-finder__debug summary{cursor:pointer;font-weight:600}.softness-finder__debug ol{margin:1.2rem 0;padding-inline-start:2.4rem;line-height:1.7}.softness-finder__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.2rem;margin-top:2.6rem;padding-top:2.2rem;border-top:.1rem solid rgba(var(--sf-purple-rgb),.1)}.softness-finder__button[hidden],.softness-finder__actions[hidden]{display:none!important}.softness-finder__button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1.1rem 2.4rem;border-radius:999px;border:.1rem solid var(--sf-purple);font-size:1.3rem;font-weight:700;letter-spacing:.03em;line-height:1;text-decoration:none;cursor:pointer;transition:background .25s ease,color .25s ease}.softness-finder__button--primary{background:var(--sf-purple);color:var(--sf-cream)}.softness-finder__button--primary:hover,.softness-finder__button--secondary{background:transparent;color:var(--sf-purple)}.softness-finder__button--secondary:hover{background:var(--sf-purple);color:var(--sf-cream)}.softness-finder__chevron{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;flex-shrink:0;transition:transform .25s ease}.softness-finder__chevron svg,.softness-finder__chevron .icon-caret{display:block;width:1rem;height:.6rem}.softness-finder__chevron path{fill:currentColor}.softness-finder__button--expanded .softness-finder__chevron{transform:rotate(180deg)}@media screen and (max-width:749px){.softness-finder{--sf-panel-pad-bottom: 2.4rem}.softness-finder__panel{padding:2rem 1.6rem var(--sf-panel-pad-bottom)}.softness-finder__subtitle{font-size:1.25rem}.softness-finder__marker{max-width:min(20rem,76vw)}.softness-finder__results{padding:2.2rem 1.4rem 2rem}}@media(prefers-reduced-motion:reduce){.softness-finder__marker,.softness-finder__fill,.softness-finder__thumb,.softness-finder__item,.softness-finder__grid--resizing{transition:none}.softness-finder__grid--leaving .softness-finder__item,.softness-finder__grid--entering .softness-finder__item{opacity:1;transform:none}.softness-finder--hint .softness-finder__thumb,.softness-finder--hint .softness-finder__thumb:before,.softness-finder--hint .softness-finder__thumb:after,.softness-finder--hint .softness-finder__hint-chevron--left,.softness-finder--hint .softness-finder__hint-chevron--right{animation:none}.softness-finder--hint .softness-finder__thumb:before,.softness-finder--hint .softness-finder__thumb:after{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/component-softness-finder.css.map */