/* REBUILT IMMERSIVE RACK — THE RAIL EXPERIENCE / NOVEMBER 2026 */
:root{--rack-wall:#ece5db;--rack-edge:#d3c8ba}
.rack-frame{position:relative;isolation:isolate}
.rack-content{height:560px;grid-template-columns:19% 62% 19%;background:radial-gradient(ellipse at 50% 21%,#fffdfa 0%,#f6f2eb 42%,#e5ddd2 100%);transition:background .75s ease}
.rack-content[data-world="1"]{background:radial-gradient(ellipse at 50% 26%,#fffcf5,#e9e5dd 58%,#d8d4cb 100%)}
.rack-content[data-world="2"]{background:radial-gradient(ellipse at 50% 20%,#fffefa,#eef0ed 57%,#dfe4df 100%)}
.rack-content[data-world="3"]{background:radial-gradient(ellipse at 50% 20%,#fffdfc,#ebe3dc 56%,#d6ccc4 100%)}
.rack-content:before{background:none}
.rack-display{position:relative;touch-action:pan-y;overflow:hidden;isolation:isolate;perspective:900px;cursor:grab;outline-offset:-6px}
.rack-display.is-dragging{cursor:grabbing}
.rack-wall{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 53% 28%,#fffdfa8c,transparent 70%)}
.rack-ceiling-light{position:absolute;z-index:1;top:0;left:17%;width:66%;height:290px;background:linear-gradient(180deg,#fffefa70,#fffefa00 95%);clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);filter:blur(8px);pointer-events:none}
.rack-display:after{content:"";position:absolute;z-index:7;inset:0;pointer-events:none;background:linear-gradient(90deg,#f5efeacb 0,transparent 8%,transparent 92%,#f5efeacb 100%)}
.rack-floor{position:absolute;bottom:0;inset-inline:0;height:18%;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent,#e2d9ce38 43%,#d9cfc13b);border-top:1px solid #dacdbb15}
.rack-floor:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 190px,#c1b2a61d 192px);transform:perspective(290px) rotateX(70deg) translateY(26px)}
.rack-rail{top:16%;left:3%;right:3%;height:6px;z-index:7;background:linear-gradient(180deg,#f7f5f1 0%,#b7b1a7 25%,#655f58 52%,#b3ada5 78%,#d9d3ca);box-shadow:0 2px 6px #27201940,0 11px 8px -8px #28231b42}
.rack-rail:before,.rack-rail:after{top:-4px;width:9px;height:18px;background:linear-gradient(90deg,#66615c,#d4d0c7 45%,#6b6760)}
.rack-display .garments{position:absolute;inset:0;z-index:4;transform-style:preserve-3d;perspective:1000px;transition:translate .18s ease-out;translate:var(--drag-translate,0px) 0}
.rack-display .garment-btn{position:absolute;top:14.3%;left:50%;width:170px;height:338px;background:transparent;border:0;padding:0;margin:0;will-change:transform,opacity,filter;transform-origin:50% 7%;transform-style:preserve-3d;backface-visibility:visible;transition:transform .92s cubic-bezier(.2,.75,.16,1),opacity .6s ease,filter .65s ease;box-shadow:none!important;overflow:visible;outline-offset:6px}
.rack-display .garment-btn[aria-pressed="true"]{filter:drop-shadow(0 22px 16px #392d2538) drop-shadow(0 40px 30px #3b302421)}
.rack-display .garment-btn:not([aria-pressed="true"]){filter:drop-shadow(4px 10px 7px #4c3b2b28)}
.rack-display .garment-btn:after{display:none}
.rack-display .garment-btn .hanger{width:94px;height:48px;left:calc(50% - 47px);top:0;z-index:3;opacity:.95;filter:drop-shadow(1px 2px 1px #362e264a)}
.rack-display .garment-btn .hanger path{stroke:#716e68;stroke-width:2.4}
.rack-display .garment-btn img{top:38px;left:0;display:block;width:100%;height:290px;object-fit:contain;pointer-events:none;user-select:none;filter:contrast(1.06) drop-shadow(1px 3px 1px #17120e29)}
.rack-display .garment-btn[aria-pressed="true"] img{filter:contrast(1.07) saturate(1.08) drop-shadow(1px 4px 4px #14110e20)}
.rack-garment-index{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1px;font-weight:800;color:#5a4f43;background:#fffaf6;border:1px solid #d8c9b9;padding:6px 8px;opacity:0;transition:opacity .3s;white-space:nowrap;pointer-events:none}
.rack-display .garment-btn[aria-pressed="true"] .rack-garment-index{opacity:1}
.rack-ground{bottom:8%;left:12%;right:12%;height:57px;z-index:1;background:radial-gradient(ellipse at 50% 50%,#463c304d 0,#74634e16 41%,transparent 75%);filter:blur(19px);pointer-events:none}
.rack-spotlight{top:0;height:100%;left:13%;right:13%;background:radial-gradient(ellipse at 50% 22%,#ffffffc2 0,#fffefa70 25%,#ffffff00 67%);z-index:1}
.rack-display .rack-dot-overlay{z-index:1;bottom:16%;opacity:.15;letter-spacing:6px;font-size:12px}
.rack-copy,.rack-side{z-index:6}.rack-copy{padding-top:52px}.rack-side{padding-top:52px}.rack-copy h3{font-size:clamp(29px,3.5vw,53px)}
.rack-quick-actions{z-index:10;bottom:62px;gap:10px}.rack-focus-btn{background:#282522;border-color:#282522;border-radius:2px;padding:13px 18px;box-shadow:0 7px 18px #261d1726}
.rack-touch-note{display:none}
.rack-drag-mark{position:absolute;top:14px;left:15px;display:flex;gap:9px;align-items:center;z-index:9;font-size:8px;letter-spacing:1.2px;font-weight:800;color:#7b6c5b;pointer-events:none}
.rack-drag-pointer{font-family:Arial,sans-serif;font-size:17px;font-weight:400}
.rack-position-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:9px;background:#f9f4e8be;padding:5px 10px;border:1px solid #dacfc255;border-radius:30px}
.rack-position-dots button{width:18px;height:24px;display:grid;place-items:center;background:transparent;border:0;padding:0;border-radius:100%}
.rack-position-dots button>span{display:block;width:5px;height:5px;border-radius:50%;background:#a79a8b;transition:all .35s}
.rack-position-dots button[aria-current="true"]>span{width:22px;height:6px;border-radius:10px;background:#36322f}
.cinema-toggle{position:absolute;z-index:12;top:14px;right:13px;display:flex;align-items:center;gap:8px;border:1px solid #cfbfae;background:#fffaf3ea;color:#3b322c;padding:11px 13px;letter-spacing:1px;font-size:9px;font-weight:800;box-shadow:0 7px 20px #33261b1a;transition:background .2s}
.cinema-toggle:hover{background:#fff}
.rack-focused .garment-btn:not([aria-pressed="true"]){pointer-events:auto}
/* Expanded showroom retains the exact same rack DOM and product state. */
.cinema-modal[hidden]{display:none}.cinema-modal{position:fixed;inset:0;z-index:1000;overflow-y:auto;background:#eee8df;display:flex;flex-direction:column}
.cinema-topbar{min-height:67px;background:#201e1d;color:#f5f1e9;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 3%}
.cinema-brand{font-size:12px;letter-spacing:1.6px;font-weight:700}.cinema-close{background:transparent;color:#f3eee6;border:1px solid #7b7169;padding:12px 15px;font-size:10px;letter-spacing:1.1px;font-weight:800}
.cinema-stage{width:min(1620px,100%);margin:0 auto;padding:25px 3%;flex:1}.cinema-stage .rack-frame{height:auto}
.cinema-stage .rack-content{height:min(67vw,690px);min-height:540px;grid-template-columns:18% 64% 18%}
.cinema-stage .rack-display .garment-btn{top:13%}
.cinema-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 3%;letter-spacing:1.5px;font-size:9px;font-weight:800;color:#8a7864}
body.cinema-open{overflow:hidden}
@media(max-width:1180px){.rack-content{grid-template-columns:18% 64% 18%}.rack-display .garment-btn{width:155px}.rack-copy,.rack-side{padding-left:16px;padding-right:16px}}
@media(max-width:850px){.rack-content{grid-template-columns:20% 60% 20%;height:510px}.rack-display .garment-btn{width:145px;height:300px;top:15%}.rack-display .garment-btn img{height:263px}.rack-copy h3{font-size:30px}.cinema-stage .rack-content{height:555px;min-height:0}.cinema-stage .rack-content .rack-display .garment-btn{top:15%}}
@media(max-width:590px){.rack-content{height:583px;grid-template-columns:1fr;grid-template-rows:97px 366px 120px}
 .rack-copy{padding:19px 16px 4px;grid-row:1}.rack-copy h3{font-size:22px;margin:7px 0 0;line-height:1.05}.rack-copy p,.rack-caption{display:none}.rack-small-label{font-size:8px}
 .rack-display{grid-row:2;min-width:0;overflow:hidden;perspective:690px}.rack-rail{top:14%;left:3%;right:3%}.rack-display .garment-btn{width:139px;top:12%;height:288px}.rack-display .garment-btn img{height:252px;top:37px}.rack-display .garment-btn .hanger{width:80px;left:calc(50% - 40px)}
 .rack-side{grid-row:3;padding:15px 18px;background:#f3eee5;border-top:1px solid #d9ccbe;grid-template-rows:1fr 1fr}.rack-side .product-side-name{font-size:20px}.rack-side .rack-index{font-size:8px}
 .rack-quick-actions{bottom:49px}.rack-focus-btn{font-size:9px;padding:11px 15px}.rack-display .rack-dot-overlay{display:none}.rack-drag-mark{top:14px;font-size:7px}.cinema-toggle{top:8px;right:9px;padding:8px 9px;font-size:17px}.cinema-toggle span{display:none}
 .rack-position-dots{bottom:11px}.rack-ground{bottom:4%;height:25px;filter:blur(11px)}
 .cinema-topbar{padding:10px 13px;min-height:56px}.cinema-brand{font-size:10px}.cinema-close{font-size:9px;padding:10px 11px}.cinema-stage{padding:10px 8px 25px}.cinema-stage .rack-content{height:583px;grid-template-columns:1fr;grid-template-rows:97px 366px 120px}.cinema-stage .rack-display .garment-btn{top:12%}.cinema-bottom{font-size:8px}
}
@media(max-width:375px){.rack-content{grid-template-rows:89px 353px 118px;height:560px}.rack-display .garment-btn{width:122px;height:276px}.rack-display .garment-btn img{height:233px}.rack-copy h3{font-size:19px}.rack-quick-actions{bottom:45px}.rack-garment-index{bottom:10px}.cinema-stage .rack-content{grid-template-rows:89px 353px 118px;height:560px}}
@media(prefers-reduced-motion:reduce){.rack-display .garment-btn,.rack-display .garments,.rack-frame,.rack-content{transition-duration:.01ms!important}}
/* Align real hanging points to the rail after the perspective pull-forward. */
.rack-display .garment-btn[aria-pressed="true"] .hanger{transform:translateY(62px) scale(.86);transform-origin:50% 0}
.rack-display .garment-btn:not([aria-pressed="true"]) .hanger{transform:translateY(-37px) scale(.91);transform-origin:50% 0}
.rack-display .garment-btn:not([aria-pressed="true"]) img{transform:translateY(-33px)}
@media(max-width:590px){
 .rack-display .garment-btn[aria-pressed="true"] .hanger{transform:translateY(46px) scale(.91)}
 .rack-display .garment-btn:not([aria-pressed="true"]) .hanger{transform:translateY(-36px) scale(.91)}
 .rack-display .garment-btn:not([aria-pressed="true"]) img{transform:translateY(-30px)}
}
/* Final optical correction of the selected hook at phone and desktop depth. */
.rack-display .garment-btn[aria-pressed="true"] .hanger{transform:translateY(34px) scale(.83)}
@media(max-width:590px){.rack-display .garment-btn[aria-pressed="true"] .hanger{transform:translateY(24px) scale(.82)}}