.csc{display:block;--csc-r: clamp(96px, 10.78vw, 207px);--csc-gap: clamp(16px, 2.4vw, 30px);--csc-dot: 12px;--csc-ease: cubic-bezier(.65, 0, .35, 1)}.csc__grid{display:grid;grid-template-columns:calc(var(--csc-r) + 56px) minmax(0,1fr) minmax(0,3.3fr);column-gap:var(--csc-gap);align-items:center}.csc__wheel{position:relative;align-self:stretch;min-height:calc(var(--csc-r) * 2 + 40px);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.csc__ring{position:absolute;left:calc(var(--csc-r) * -1);top:50%;width:calc(var(--csc-r) * 2);height:calc(var(--csc-r) * 2);translate:0 -50%;border:1px solid var(--csc-line, #b8a29e);border-radius:50%;clip-path:inset(0 0 0 50%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);pointer-events:none}.csc__heading{position:absolute;left:0;top:50%;translate:0 -50%;margin:0;pointer-events:none;color:var(--heading-color);max-width:70%}.csc__grid .placeholder-svg{background:var(--secondary-bg-color)}.csc__steps{position:absolute;top:0;right:0;bottom:0;left:0}.csc__label{font-size:2.5rem;color:var(--accent-primary)}.csc__step{--a: calc((var(--i) - var(--active, 0)) * 38deg);position:absolute;left:0;top:50%;width:0;height:0;padding:0;margin:0;border:0;background:none;color:var(--csc-accent, #8c6b67);cursor:pointer;transform-origin:0 0;transform:rotate(var(--a)) translate(var(--csc-r));transition:transform .7s var(--csc-ease),opacity .5s ease}.csc__step-inner{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;white-space:nowrap;transform-origin:0 50%;translate:calc(var(--csc-dot) / -2) -50%;rotate:calc(var(--a) * -1);transition:rotate .7s var(--csc-ease)}.csc__dot{flex:none;box-sizing:border-box;width:var(--csc-dot);height:var(--csc-dot);border:1px solid var(--accent-primary);border-radius:50%;background:var(--accent-primary-secondary);transition:background-color .4s ease}.csc__step[aria-selected=true] .csc__dot{background:var(--accent-primary)}.csc__step:focus-visible{outline:none}.csc__step:focus-visible .csc__step-inner{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}.csc__step[data-distance="0"]{opacity:1}.csc__step[data-distance="1"]{opacity:.8}.csc__step[data-distance="2"]{opacity:.35}.csc__step[data-distance="3"]{opacity:0;pointer-events:none}.csc__products,.csc__content-wrap{display:grid}.csc__product,.csc__content{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .6s ease,transform .7s var(--csc-ease),visibility 0s linear .7s}.csc__product[data-state=before],.csc__content[data-state=before]{transform:translateY(-24px)}.csc__product[data-state=after],.csc__content[data-state=after]{transform:translateY(24px)}.csc__product[data-state=active],.csc__content[data-state=active]{opacity:1;visibility:visible;transform:none;transition-delay:0s}.csc__product{align-self:center}.csc__product-link{display:block;color:inherit;text-decoration:none}.csc__product-media{aspect-ratio:4 / 5;overflow:hidden;border:1px solid var(--csc-line, #b8a29e);border-radius:calc(var(--csc-radius, 24px) * .8);background:var(--secondary-bg-color, transparent)}.csc__product-img,.csc__product-media .placeholder-svg{display:block;width:100%;height:100%;object-fit:contain}.csc__product-info{padding:12px 4px 0}.csc__product-title,.csc__product-price{margin:0}.csc__product-compare{margin-left:6px}.csc__media{position:relative;aspect-ratio:33 / 20;overflow:hidden;border-radius:var(--img-border-radius)}.csc__media-el,.csc__media .placeholder-svg,.csc__media video{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--secondary-bg-color)}.csc__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,rgba(0,0,0,var(--csc-overlay, .4)),#0000 60%);pointer-events:none}.csc__content-wrap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(16px,2.4vw,32px);color:var(--csc-text, #fff)}.csc__content{max-width:28em}.csc__content-number{margin-bottom:1rem;color:var(--secondary-text-color)}.csc__content-title{margin:0;color:var(--secondary-text-color)}.csc__content-text{margin-top:.7rem}.csc__content-text>*{color:var(--secondary-text-color)}@media screen and (max-width:800px){.csc{--csc-r: 88px}.csc__grid{align-items:start;grid-template-areas:"steps product" "media media";grid-template-columns:1fr 1fr}.csc__wheel{align-self:auto;height:220px;grid-area:steps;min-height:0}.csc__product{max-width:240px;grid-area:product}.csc__media{grid-area:media}}@media(prefers-reduced-motion:reduce){.csc__step,.csc__step-inner,.csc__product,.csc__content{transition-duration:.01s}}.csc__media{container-type:inline-size}.csc__content-text{max-height:120px;max-height:26cqw;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--scroll-bar-thumb, #fff) var(--background-color)}.csc__content-text::-webkit-scrollbar{width:4px}.csc__content-text::-webkit-scrollbar-thumb{background:var(--secondary-text-color, #fff);border-radius:4px}.csc__content-text::-webkit-scrollbar-track{background:transparent}@media screen and (max-width:640px){.csc__content-text{max-height:120px;max-height:48cqw}}.csc__content{align-self:end}@media screen and (max-width:989px){.csc .csc__heading{max-width:calc(var(--csc-r) - 16px);font-size:clamp(15px,2.2vw,18px);line-height:1.2;overflow-wrap:anywhere}}@media screen and (min-width:300px)and (max-width:800px){.csc{--csc-r: clamp(88px, 30vw, 192px)}.csc__wheel{height:calc(var(--csc-r) * 2 + 40px)}.csc__product{max-width:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/circular-step-showcase.css.map */