.rack-section.section{padding-top:61px;padding-bottom:29px}.rack-heading{margin-bottom:27px}.rack-heading h2{font-size:37px;letter-spacing:-1.5px}.rack-intro{display:flex;align-items:center;gap:24px}.rack-intro p{font-size:11px;color:var(--muted);margin:0}.rack-arrows{display:flex;gap:7px}.rack-arrow{border:1px solid #cbd1c9;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;transition:background .2s}.rack-arrow svg{width:16px;height:16px}.rack-arrow:hover:not(:disabled){background:var(--navy);color:white;border-color:var(--navy)}.rack-arrow:disabled{opacity:.3}
.rack-room{position:relative;background:#eeeee7;border:1px solid #e3e4db;border-radius:14px;overflow:hidden;isolation:isolate}.rack-room-label{position:absolute;top:21px;left:25px;right:25px;display:flex;justify-content:space-between;gap:20px;color:#667367;z-index:2;pointer-events:none;font-size:7px;letter-spacing:1.6px}.rack-room-label span:first-child{font:750 9px var(--display);letter-spacing:2px}.rack-viewport{position:relative;height:405px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scroll-padding-inline:calc(50% - 135px);cursor:grab;z-index:1;-webkit-overflow-scrolling:touch}.rack-viewport::-webkit-scrollbar{display:none}.rack-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none}.rack-viewport:focus-visible{outline-offset:-4px;outline-color:#138065}
.rack-rail{display:flex;align-items:flex-start;gap:34px;position:relative;min-width:100%;width:max-content;padding:62px max(22px,calc((100vw - 8.6vw - 270px)/2)) 18px}.rack-rail:before{content:'';position:absolute;left:0;right:0;top:75px;height:3px;background:#647061;border-radius:3px;box-shadow:0 2px 0 #d4d7cd;pointer-events:none}.rack-item{position:relative;flex:0 0 270px;width:270px;scroll-snap-align:center;padding-top:0}.rack-garment{position:relative;display:block;width:100%;padding:0;background:transparent;border:0;border-radius:10px;transform-origin:50% 8%;transition:opacity .3s ease,filter .3s ease;opacity:.66;user-select:none;-webkit-user-select:none}.rack-item.is-selected .rack-garment{opacity:1}.rack-garment img{width:100%;height:294px;object-fit:contain;object-position:center top;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 13px 9px #30452b12)}.rack-item.is-selected .rack-garment img{filter:drop-shadow(0 16px 13px #30452b20)}.rack-garment:focus-visible{outline:2px solid #138065;outline-offset:-8px}.rack-floor{position:absolute;inset:auto 8% 28px;height:30px;border-radius:50%;background:#717c5e0b;filter:blur(12px);pointer-events:none;z-index:0}.rack-drag-hint{position:absolute;bottom:12px;left:15px;right:15px;text-align:center;z-index:2;pointer-events:none;color:#72806e;font-size:8px;letter-spacing:.3px}.rack-drag-hint svg{width:17px;height:17px;margin-right:7px}.rack-drag-hint>span{margin:0 6px}
.rack-selection{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:23px 2px 0}.rack-selection-text .eyebrow{font-size:7px;letter-spacing:1.3px;min-height:12px}.rack-selection h3{font:550 17px/1.4 var(--display);letter-spacing:-.4px;margin:5px 0}.rack-selection p{font-size:12px;font-weight:600;margin:5px 0 0}.rack-selection p small{color:var(--muted);font-size:9px;font-weight:400;margin-left:8px}.rack-selection .button{justify-self:end;min-width:158px;font-size:11px;padding:14px 20px}.rack-position{display:flex;gap:7px;align-items:center}.rack-position button{width:26px;height:26px;display:grid;place-items:center;padding:7px}.rack-position button:after{content:'';width:6px;height:6px;border-radius:50%;background:#c8cfc2;transition:transform .2s,background .2s}.rack-position button[aria-pressed=true]:after{background:var(--navy);transform:scale(1.3)}.rack-demo-note{font-size:8px;color:var(--muted);margin:18px 0 0;border-bottom:1px solid var(--border);padding-bottom:24px}
@media(min-width:1640px){.rack-rail{padding-inline:calc((1499px - 270px)/2)}}
@media(max-width:1100px){.rack-intro{gap:16px}.rack-intro p{font-size:10px}.rack-heading h2{font-size:33px}.rack-viewport{height:375px;scroll-padding-inline:calc(50% - 120px)}.rack-rail{gap:25px;padding-inline:calc((100vw - 8.6vw - 240px)/2)}.rack-item{width:240px;flex-basis:240px}.rack-garment img{height:268px}}
@media(max-width:760px){.rack-section.section{padding-top:38px;padding-bottom:9px}.rack-heading{display:block;position:relative;padding-right:90px;margin-bottom:22px}.rack-heading h2{font-size:29px;letter-spacing:-1px}.rack-heading .eyebrow{font-size:6px;letter-spacing:1px}.rack-intro{margin-top:10px}.rack-intro p{font-size:9px;line-height:1.7;max-width:210px}.rack-arrows{position:absolute;right:0;top:22px;gap:5px}.rack-arrow{width:35px;height:35px}.rack-room{border-radius:12px}.rack-room-label{left:15px;right:15px;top:17px;font-size:5px;letter-spacing:.8px}.rack-room-label span:first-child{font-size:8px;letter-spacing:1.2px}.rack-viewport{height:330px;scroll-padding-inline:calc(50% - 105px)}.rack-rail{gap:18px;padding:52px calc((90vw - 210px)/2) 18px}.rack-rail:before{top:64px}.rack-item{width:210px;flex-basis:210px}.rack-garment img{height:237px}.rack-drag-hint{bottom:11px;font-size:7px}.rack-drag-hint svg{width:14px}.rack-selection{grid-template-columns:1fr auto;gap:14px;padding-top:18px}.rack-selection h3{font-size:14px;letter-spacing:-.3px;max-width:205px}.rack-selection-text .eyebrow{font-size:6px;letter-spacing:1px}.rack-selection p{font-size:11px}.rack-selection p small{display:block;font-size:8px;margin:2px 0 0}.rack-position{grid-column:1/-1;grid-row:2;justify-content:center;gap:5px}.rack-selection .button{min-width:118px;padding:12px;font-size:10px;gap:17px}.rack-demo-note{font-size:7px;line-height:1.7;margin-top:7px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.rack-garment,.rack-arrow,.rack-position button:after{transition:none!important}.rack-viewport{scroll-behavior:auto}}
/* The turn and the short hanger sway use separate layers. No layout changes on hover. */
.rack-garment{perspective:950px;cursor:grab}.rack-turn{display:block;transform:rotateY(-72deg);transform-origin:50% 8%;transition:transform .68s cubic-bezier(.2,.75,.2,1);pointer-events:none;backface-visibility:hidden}.rack-item.is-open{z-index:3}.rack-item.is-open .rack-turn,.rack-garment:focus-visible .rack-turn{transform:rotateY(0deg)}.rack-item:has(.rack-garment:hover){z-index:4}.rack-viewport.is-dragging .rack-garment{cursor:grabbing}.rack-viewport.is-dragging .rack-turn{transform:rotateY(-72deg)}
@media(hover:hover) and (pointer:fine){.rack-garment:hover .rack-turn{transform:rotateY(0deg)}.rack-garment:hover{opacity:1}.rack-viewport.is-dragging .rack-garment:hover .rack-turn{transform:rotateY(-72deg)}}
.rack-touch-hint{display:none}
@media(hover:none){.rack-mouse-hint{display:none}.rack-touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.rack-turn{transition:none!important}}
.rack-rail{gap:20px;padding-inline:var(--rack-gutter,calc((91.4vw - 176px)/2))}.rack-viewport{scroll-padding-inline:var(--rack-gutter,calc(50% - 88px))}.rack-item{width:176px;flex-basis:176px}.rack-garment{width:270px;margin-left:-47px}
@media(max-width:1100px){.rack-rail{gap:18px}.rack-item{width:156px;flex-basis:156px}.rack-garment{width:240px;margin-left:-42px}}
@media(max-width:760px){.rack-rail{gap:14px}.rack-item{width:124px;flex-basis:124px}.rack-garment{width:210px;margin-left:-43px}}
