/* Each SVG keeps the hanger, collar/waistband and garment in one coordinate system. */
.rail-scene{height:560px}
.clothes-rod{top:120px}
.clothes-rail{padding:116px 30px 0;gap:14px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c4bdb1 transparent}
.rail-item{height:365px;flex:0 0 180px;min-width:180px;max-width:180px;display:block;transform-origin:50% 4px;scroll-snap-align:center;transition:transform .6s var(--ease)}
.rail-outfit{position:absolute;top:2px;left:0;display:block;width:100%;height:360px;max-height:360px;overflow:visible;filter:drop-shadow(0 7px 4px #231b1715);stroke:none}
.rail-item:hover,.rail-item:focus-visible{transform:rotate(-4deg);z-index:10}
.rail-item:nth-child(even):hover,.rail-item:nth-child(even):focus-visible{transform:rotate(4deg)}
.rail-item .rail-tag{top:270px;pointer-events:none}
@media(max-width:760px){
 .rail-scene{height:420px}
 .clothes-rod{top:100px}
 .clothes-rail{padding:96px 20px 0;gap:12px;justify-content:flex-start}
 .rail-item{flex:0 0 145px;min-width:145px;max-width:145px;height:300px}
 .rail-outfit{height:210px;max-height:210px}
 .rail-item .rail-tag{top:215px;width:120px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.rail-item:hover,.rail-item:focus-visible,.rail-item:nth-child(even):hover,.rail-item:nth-child(even):focus-visible{transform:none}}

/* Angled rack → face-on hover → centred, isolated product inspection. */
.rail-item,.rail-item:hover,.rail-item:focus-visible,.rail-item:nth-child(even):hover,.rail-item:nth-child(even):focus-visible{transform:none}
.rail-item{--rest-sway:-2deg;transition:filter .65s ease,opacity .65s ease;isolation:auto}
.rail-item:nth-child(even){--rest-sway:2deg}
.rail-outfit{transform-origin:50% 2px;transform:perspective(1000px) rotateY(58deg) rotateZ(var(--rest-sway));transition:transform 850ms cubic-bezier(.2,.85,.25,1.12),filter .7s ease;backface-visibility:visible}
.rail-item:hover .rail-outfit,.rail-item:focus-visible .rail-outfit{transform:perspective(1000px) rotateY(0deg) rotateZ(var(--sway,0deg));filter:drop-shadow(0 12px 10px #231b1726)}
.rail-item .rail-tag{transition:opacity .35s ease,transform .55s var(--ease)}
.clothes-rail.has-selection .rail-item{opacity:.3;filter:blur(2px);pointer-events:none}
.clothes-rail.has-selection .rail-selected{opacity:1;filter:none;z-index:20}
.clothes-rail.has-selection .rail-selected .rail-outfit{transform:translateX(var(--rail-focus-x,0px)) perspective(1000px) rotateY(0deg) rotateZ(0deg) scale(1.04);filter:drop-shadow(0 16px 12px #231b1728)}
.has-selection .rail-tag{opacity:0!important}
.rail-inspector{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;z-index:25;max-width:calc(100% - 40px);width:max-content;padding:18px 20px;background:#ffffffeb;backdrop-filter:blur(20px);border:1px solid #fff9;border-radius:20px;box-shadow:0 12px 45px #29201518;animation:rail-panel-in .5s var(--ease)}
.rail-inspector-info{min-width:190px}.rail-inspector-info .eyebrow{font-size:7px;color:var(--muted)}.rail-inspector h3{font:28px var(--serif);margin:4px 0}.rail-inspector p{font-size:10px;color:var(--muted)}.rail-inspector .round{width:32px;height:32px;font-size:22px;flex-shrink:0}.rail-inspector .primary{white-space:nowrap}
@keyframes rail-panel-in{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.rail-outfit{height:290px;max-height:290px}.rail-inspector{bottom:14px;max-width:calc(100% - 24px);width:calc(100% - 24px);padding:13px;gap:13px;flex-wrap:wrap}.rail-inspector-info{min-width:0;flex:1}.rail-inspector h3{font-size:23px}.rail-inspector>.round{position:absolute;right:12px;top:12px}.rail-inspector>.swatches{margin-right:36px}.rail-inspector>.primary{width:100%;min-height:40px}.rail-scene.inspecting{height:540px}}
@media(prefers-reduced-motion:reduce){.rail-outfit,.rail-item:hover .rail-outfit,.rail-item:focus-visible .rail-outfit{transform:none;transition:none}.clothes-rail.has-selection .rail-selected .rail-outfit{transform:translateX(var(--rail-focus-x,0px))}.rail-inspector{animation:none}}