.rack{container-type:inline-size;--h:clamp(250px,calc(100svh - 400px),420px);--w:calc(var(--h) / 2);--hook:calc(var(--h) * 0.0242);--away:58deg;--overlap:0.34}.rack-stage{position:relative;height:var(--h)}.rack-rail{position:absolute;inset-inline:0;top:calc(var(--hook) - 3px);height:6px;border-radius:3px;background:linear-gradient(180deg,#e6cb98,#b08d57 50%,#7d6033);box-shadow:0 3px 8px rgb(43 26 18/.18)}.rack-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-inline:calc(50cqw - var(--w) / 2)}.rack-track::-webkit-scrollbar{display:none}.rack-item{position:relative;flex:0 0 var(--w);height:var(--h);scroll-snap-align:center;scroll-snap-stop:always;transform-origin:50% 0;--d:calc(var(--i) - var(--a));--side:clamp(-1,var(--d),1)}.rack-item+.rack-item{margin-left:calc(var(--w) * -1 * var(--overlap))}.rack-item[data-start]{scroll-initial-target:nearest}.rack-hanger{position:absolute;inset:0;transform-origin:50% var(--hook)}.rack-front,.rack-side{filter:drop-shadow(0 12px 12px rgb(43 26 18/.1))}.rack-item[data-active] .rack-front{filter:drop-shadow(0 20px 18px rgb(43 26 18/.16))}.rack-shade{filter:brightness(0);opacity:0}.rack-card{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(1100px) rotateY(180deg);transition:transform .36s cubic-bezier(.5,0,.25,1)}.rack-item[data-active] .rack-card{transform:perspective(1100px) rotateY(0deg)}.rack-card>.rack-front,.rack-card>.rack-side{backface-visibility:hidden;-webkit-backface-visibility:hidden}.rack-card>.rack-side{transform:rotateY(180deg)}.rack-item[data-lifted]{visibility:hidden}.rack-tap{position:absolute;inset:0;z-index:1;cursor:pointer;border-radius:12px}.rack-tap:focus-visible{outline:2px solid var(--color-espresso);outline-offset:-2px}.rack-hint{position:absolute;left:50%;bottom:6px;z-index:20;translate:-50% 0;pointer-events:none;transition:opacity .4s ease}.rack-hint-hand{animation:rack-hint-hand 1.8s ease-in-out infinite}.rack[data-browsed] .rack-hint{opacity:0}.rack:not([data-browsed]) .rack-track{animation:rack-peek 1.6s ease-in-out 1.2s both}@keyframes rack-hint-hand{0%,to{transform:translateX(3px) rotate(8deg)}50%{transform:translateX(-4px) rotate(-6deg)}}@keyframes rack-peek{0%,to{transform:none}35%{transform:translateX(calc(var(--w) * -.14))}65%{transform:translateX(calc(var(--w) * .04))}}@supports (animation-timeline:view()){.rack-item{animation:rack-coverflow linear both;animation-timeline:view(inline);view-timeline:--rack-piece inline}.rack-item[data-side-view]{animation-name:rack-slide}.rack-shade{animation:rack-shade linear both;animation-timeline:--rack-piece}}@keyframes rack-coverflow{0%{transform:perspective(1000px) rotateY(-48deg) scale(.88);z-index:1}50%{transform:none;z-index:10}to{transform:perspective(1000px) rotateY(48deg) scale(.88);z-index:1}}@keyframes rack-shade{0%,to{opacity:.16}50%{opacity:0}}@keyframes rack-slide{0%,to{transform:scale(.9);z-index:1}50%{transform:none;z-index:10}}.rack-zones{display:none}@media (hover:hover) and (pointer:fine) and (min-width:1024px){.rack{--h:clamp(320px,calc(100svh - 410px),600px);--s:clamp(46px,calc((100cqw - var(--w) - 10rem) / max(var(--n) - 1, 1)),104px);--start:calc((100cqw - (var(--n) - 1) * var(--s) - var(--w)) / 2)}.rack-track{display:block;overflow:visible;padding:0;scroll-snap-type:none}.rack-item{position:absolute;top:0;left:0;width:var(--w);margin:0!important;animation:none;--far:max(var(--d),-1 * var(--d));--on:calc(1 - max(var(--side), -1 * var(--side)));--after:clamp(0,var(--d),1);--turn:var(--away);transform:translateX(calc(var(--start) + var(--i) * var(--s) + var(--after) * (var(--w) - var(--s)) + (1 - var(--on)) * (var(--s) - var(--w)) / 2)) perspective(1100px) rotateY(calc(var(--side) * -1 * var(--turn))) scale(calc(1 - (1 - var(--on)) * .04));z-index:calc(30 - var(--far));transition:transform .8s cubic-bezier(.22,.8,.24,1)}.rack-item[data-side-view]{--turn:0deg;animation:none}.rack-hint{display:none}.rack-track{animation:none!important}.rack-item[data-active] .rack-hanger{animation:rack-swing 1.5s cubic-bezier(.3,.6,.3,1)}.rack-shade{animation:none;opacity:.14;transition:opacity .8s ease}.rack-item[data-active] .rack-shade{opacity:0}.rack-tap{display:none}.rack-zones{position:absolute;inset:0;z-index:40;display:grid}.rack-zone{cursor:pointer;outline:none}.rack-stage:has(.rack-zone:focus-visible) .rack-item[data-active] .rack-hanger{outline:2px solid var(--color-espresso);outline-offset:4px;border-radius:16px}}@keyframes rack-swing{0%{transform:rotate(0deg)}22%{transform:rotate(1.6deg)}48%{transform:rotate(-1.1deg)}72%{transform:rotate(.45deg)}to{transform:rotate(0deg)}}.fitting{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow-y:auto;overscroll-behavior:contain}.fitting::backdrop{background:rgb(244 238 230/.97);animation:fitting-fade-in .4s ease both}@media (hover:hover) and (pointer:fine){.fitting::backdrop{background:rgb(244 238 230/.72);backdrop-filter:blur(14px)}}.fitting[data-closing]::backdrop{animation:fitting-fade-out .45s ease both}.fitting-fade{animation:fitting-fade-in .5s ease .15s both}.fitting[data-closing] .fitting-fade{animation:fitting-fade-out .25s ease both}@keyframes fitting-fade-in{0%{opacity:0}}@keyframes fitting-fade-out{to{opacity:0}}.fitting-column{--v:min(52svh,460px);--gh:min(calc(var(--v) / var(--len)),calc(var(--v) * 1.35),130vw)}@media (min-width:1024px){.fitting-column{--v:min(72svh,660px);--gh:min(calc(var(--v) / var(--len)),calc(var(--v) * 1.35))}}.fitting-stage{position:relative;height:calc(var(--gh) * var(--len))}.garment{position:relative;aspect-ratio:1/2;height:var(--gh);transform-origin:50% 0;touch-action:pan-y}.garment[data-enter=next]{animation:garment-in-next .55s cubic-bezier(.2,.8,.2,1) both}.garment[data-enter=prev]{animation:garment-in-prev .55s cubic-bezier(.2,.8,.2,1) both}@keyframes garment-in-next{0%{opacity:0;transform:translateX(18%) perspective(1100px) rotateY(-40deg)}}@keyframes garment-in-prev{0%{opacity:0;transform:translateX(-18%) perspective(1100px) rotateY(40deg)}}.garment-flip{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 0;transition:transform .9s cubic-bezier(.3,.7,.2,1)}.garment[data-side=back] .garment-flip{transform:perspective(1600px) rotateY(180deg)}.garment[data-side=front] .garment-flip{transform:perspective(1600px) rotateY(0deg)}.garment-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.garment-face[data-face=back]{transform:rotateY(180deg)}.garment-face{filter:drop-shadow(0 26px 24px rgb(43 26 18/.16))}.garment-dye{animation:garment-dye .85s cubic-bezier(.45,.05,.25,1) both}@keyframes garment-dye{0%{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}.garment-undye[data-undye=a]{animation:garment-undye-a .85s cubic-bezier(.45,.05,.25,1) both}.garment-undye[data-undye=b]{animation:garment-undye-b .85s cubic-bezier(.45,.05,.25,1) both}@keyframes garment-undye-a{0%{clip-path:inset(0 0 -3px 0)}to{clip-path:inset(0 0 calc(100% - 3px) 0)}}@keyframes garment-undye-b{0%{clip-path:inset(0 0 -3px 0)}to{clip-path:inset(0 0 calc(100% - 3px) 0)}}.hang-tag{transform-origin:50% 0;transition:transform .4s cubic-bezier(.3,.7,.3,1),opacity .3s ease}.hang-tag:hover{transform:rotate(-4deg)}.hang-tag[aria-pressed=true]{animation:tag-swing 1.2s cubic-bezier(.3,.6,.3,1)}@keyframes tag-swing{0%{transform:rotate(0deg)}25%{transform:rotate(7deg)}50%{transform:rotate(-4deg)}75%{transform:rotate(1.5deg)}to{transform:rotate(0deg)}}@media (prefers-reduced-motion:reduce){.garment-flip,.rack-item{transition-duration:.01s}.garment,.hang-tag,.hang-tag[aria-pressed=true],.rack-hanger,.rack-hint-hand,.rack-item,.rack-item[data-active] .rack-hanger,.rack-track{animation:none!important}.rack-card,.rack-front,.rack-shade,.rack-side{animation:none!important;transition-duration:.01s!important}.garment-dye,.garment-undye{animation-duration:1ms!important}}