/* Drag-to-turn illustrated looks */
.look-turn[hidden]{display:none}
.look-selection.has-turn{grid-template-columns:minmax(210px,290px) minmax(140px,.7fr) 3fr}
.turn-stage{position:relative;aspect-ratio:720/1290;overflow:hidden;border-radius:6px;background:#f3ebdd;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.turn-stage.is-dragging{cursor:grabbing}
.turn-stage>img,.turn-stage>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.turn-stage>canvas{opacity:0;transition:opacity .35s}
.turn-stage.is-ready>canvas{opacity:1}
.turn-pin{position:absolute;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#0c0c0aeb;color:#e5dece;display:grid;place-items:center;text-decoration:none;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i)*.08s)}
.turn-pin i{font:14px/1 Arial;font-style:normal}
.turn-pin::after{content:'';position:absolute;inset:-5px;border:1px solid #0c0c0a;border-radius:50%;animation:turn-ping 2.2s infinite}
.turn-pin span{position:absolute;left:28px;top:50%;translate:0 -50%;white-space:nowrap;padding:6px 9px;background:#0c0c0a;color:#e5dece;font:9px/1.3 monospace;letter-spacing:1px;clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.65,0,.25,1)}
.turn-pin.is-left span{left:auto;right:28px;clip-path:inset(0 0 0 100%)}
.turn-pin:hover span,.turn-pin:focus-visible span{clip-path:inset(0)}
.turn-pin:focus-visible{outline:2px solid #ff5400;outline-offset:3px}
.faces-front .turn-pin{transform:scale(1)}
@keyframes turn-ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.turn-controls{display:flex;align-items:center;gap:12px;margin-top:12px;font:9px/1.5 monospace;letter-spacing:1.4px}
.turn-controls button{background:none;border:0;border-bottom:1px solid transparent;color:#a7aa99;padding:8px 0;min-height:36px;font:inherit;letter-spacing:inherit;cursor:pointer}
.turn-controls button[aria-pressed="true"]{color:#e5dece;border-bottom-color:#ff5400}
.turn-readout{position:relative;flex:1;height:1px;background:#5c5b4a}
.turn-readout i{position:absolute;top:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:#e5dece}
.turn-hint{margin:6px 0 0;font:9px/1.5 monospace;letter-spacing:1.4px;color:#a2ac97}
@media(max-width:760px){.look-selection.has-turn{grid-template-columns:1fr}.look-turn{max-width:300px;margin:0 auto;width:100%}}
@media(prefers-reduced-motion:reduce){.turn-pin,.turn-pin span,.turn-stage>canvas{transition:none}.turn-pin::after{animation:none}}