/* Photographic arrangement preview. Keep product imagery independent of view state. */
.atelier-builder{grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:clamp(28px,4.5vw,68px)}
.atelier-visual{position:sticky;top:100px;padding-top:0}
.atelier-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px;font:10px/1.5 var(--sans,Inter,Arial,sans-serif);color:#bcbec7}
.atelier-view-options{display:flex;gap:18px}
.atelier-view-options button,.atelier-detail-toggle{font:inherit;border:0;background:transparent;color:#a1a4af;cursor:pointer;min-height:35px;padding:4px 0}
.atelier-view-options button{position:relative}
.atelier-view-options button:after{position:absolute;content:"";height:1px;bottom:0;left:0;right:0;background:transparent}
.atelier-view-options button[aria-pressed="true"]{color:#f1f1f4}
.atelier-view-options button[aria-pressed="true"]:after{background:#bfc1c9}
.atelier-detail-toggle{display:flex;align-items:center;gap:7px;color:#d4d6dd}
.atelier-detail-toggle:hover,.atelier-view-options button:hover{color:#fff}
.atelier-stage{aspect-ratio:3/2;border:1px solid #3d3f48;background:radial-gradient(ellipse at 42% 38%,#2a2b30 0%,#1c1d22 38%,#101115 77%);overflow:hidden}
.atelier-stage:before{position:absolute;inset:0;content:"";pointer-events:none;opacity:.1;background-image:url("assets/atelier-real/leather-grain-v1.webp");background-size:420px;mix-blend-mode:soft-light;z-index:0}
.atelier-stage:after{inset:0;border:0;box-shadow:inset 0 0 65px #0004;opacity:1;z-index:4}
.atelier-product{position:absolute;inset:0;transform:scale(1);transform-origin:48% var(--preview-origin-y,49.5%);transition:transform .45s cubic-bezier(.2,.6,.3,1);isolation:isolate}
.atelier-stage.is-detail .atelier-product{transform:scale(1.45)}
.atelier-strap{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:auto;max-width:none;filter:drop-shadow(0 11px 8px #0009);pointer-events:none;user-select:none;transition:transform .35s ease;z-index:1}
.atelier-stage[data-width="15"] .atelier-strap{transform:translate(-50%,-50%) scaleY(.6)}
.atelier-body-photo{display:none;position:absolute;inset:0;object-fit:cover;width:100%;height:100%;pointer-events:none;user-select:none;z-index:0}
.atelier-stage[data-view="body"] .atelier-body-photo{display:block}
.atelier-stage[data-view="body"] .atelier-strap{visibility:hidden}
.atelier-stage[data-view="body"]:before{display:none}
.atelier-stage-top,.atelier-stage-bottom{z-index:5;pointer-events:none;left:22px;right:22px;color:#b9bdc8;font:8px/1.4 var(--mono,"Courier New",monospace);letter-spacing:1.3px;text-shadow:0 1px 5px #0009}
.atelier-stage-top{top:23px}
.atelier-stage-top>span:last-child{max-width:none;font-size:8px;letter-spacing:.7px}
.atelier-stage-bottom{bottom:22px}
.atelier-stage-bottom>span:first-child{font:7px/1.4 var(--mono,"Courier New",monospace);letter-spacing:1.3px;color:#b9bdc8}
.atelier-stage-bottom>span:last-child{font-size:7px;letter-spacing:1.3px}
.atelier-stage[data-view="body"] .atelier-stage-top,.atelier-stage[data-view="body"] .atelier-stage-bottom{color:#e7e7ec;text-shadow:0 1px 6px #000}
.atelier-stage[data-view="body"] .atelier-stage-bottom>span:first-child{color:inherit}
.atelier-slots{position:absolute;inset:0;z-index:2}
.atelier-slot{top:var(--slot-top,49.5%);width:9.2%;z-index:2;overflow:visible}
.atelier-slot:after,.atelier-slot.is-active:after,.atelier-slot:hover:after{inset:-5%;border:1px solid transparent;box-shadow:none;background:transparent;transition:border-color .2s}
.atelier-slot:hover:after{border-color:#c4c7d136}
.atelier-slot:focus-visible{outline:1px solid #f2f1f9!important;outline-offset:8px!important;border-radius:50%}
.atelier-eyelet{width:calc(33% * var(--slot-view-scale,1));padding:calc(5.7% * var(--slot-view-scale,1));transform:translate(-50%,-50%) rotate(var(--slot-rotation,0deg)) scaleX(var(--slot-perspective,1));background:conic-gradient(from 35deg,#595e64,#f6f7f4 12%,#a2a7aa 23%,#363b42 41%,#bfc3c7 63%,#edf0f1 74%,#6b7075 89%,#41474d);border:.5px solid #c0c5c8;box-shadow:0 2px 2px #000c,0 0 1px #fff8,inset 0 0 1px #eff4f5}
.atelier-eyelet>span{border:1px solid #3f454c;background:radial-gradient(ellipse at 50% 70%,#08090b,#000 65%);box-shadow:inset 0 2px 3px #000,0 0 1px #e0e5e5}
.atelier-slot .atelier-sigil-photo{display:block;position:absolute;max-width:none;left:50%;top:50%;width:calc(100% * var(--sigil-scale,1.3) * var(--slot-view-scale,1));height:auto;transform:translate(calc(-1 * var(--sigil-anchor-x,50%)),calc(-1 * var(--sigil-anchor-y,50%))) rotate(var(--slot-rotation,0deg)) scaleX(var(--slot-perspective,1));transform-origin:var(--sigil-anchor-x,50%) var(--sigil-anchor-y,50%);filter:drop-shadow(0 2px 1px #000b) drop-shadow(1px 5px 3px #0007);pointer-events:none;user-select:none;z-index:2}
.atelier-slot.has-charm .atelier-eyelet{opacity:0}
.atelier-slot-plus{opacity:0!important}
.atelier-hole-navigation{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:63px;border-bottom:1px solid #363840;color:#aeb2be;font:8px/1.4 var(--mono,"Courier New",monospace);letter-spacing:.7px}
.atelier-hole-navigation>span:first-child{flex:0 1 auto;font-size:7px;letter-spacing:1px}
.atelier-hole-navigation>div{display:flex;gap:9px}
.atelier-hole-navigation button{position:relative;border:0;border-bottom:1px solid #535760;background:transparent;min-height:33px;width:28px;padding:7px 3px;color:#9a9eaa;font:9px/1 var(--sans,Inter,Arial,sans-serif);cursor:pointer}
.atelier-hole-navigation button[aria-pressed="true"]{border-bottom-color:#f0f0f4;color:#fff;background:#ffffff08}
.atelier-hole-navigation button.is-filled:before{content:"";width:2px;height:2px;position:absolute;left:50%;top:1px;background:#b9bec8;border-radius:50%;transform:translateX(-50%)}
.atelier-preview-selection{flex:0 1 110px;text-align:right;font:9px/1.4 var(--sans,Inter,Arial,sans-serif);letter-spacing:.2px;color:#e0e2ea;overflow-wrap:anywhere}
.atelier-preview-caption{margin-top:14px;line-height:1.6;color:#aaadba;font-size:10px}
.atelier-reset{font-size:10px}
.atelier-mounting{margin-top:22px;padding-block:16px;border-color:#383b45;color:#b3b7c3;font-size:9px}
.atelier-disclaimer{color:#9fa4b2;font-size:9px;line-height:1.7}
.atelier-preview-status:empty{display:none}
.atelier-preview-status{position:absolute;inset:auto 20px 45px;z-index:6;margin:0;background:#101115e8;color:#dedfe5;padding:12px;font:10px/1.5 var(--sans,Inter,Arial,sans-serif)}
.atelier-charm-options{max-height:485px;gap:8px;padding:1px;scroll-padding-block:8px}
.atelier-charm-option{min-height:146px;padding:12px 5px 11px;background:radial-gradient(ellipse at 50% 35%,#23252c,#111217 75%);border-color:#444752;transition:border-color .2s,background .2s}
.atelier-charm-option>.atelier-sigil-photo{display:block;flex:none;width:72px;height:72px;max-width:100%;object-fit:contain;margin-bottom:5px;filter:drop-shadow(0 2px 1px #000c);user-select:none;pointer-events:none}
.atelier-charm-option:hover{background:radial-gradient(ellipse at 50% 35%,#30323b,#17191f 75%);border-color:#9c9fae}
.atelier-charm-option[aria-pressed="true"]{background:radial-gradient(ellipse at 50% 35%,#37323a,#201c24 75%);border-color:#d1c7ce}
.atelier-charm-name{font:600 9px/1.35 var(--sans,Inter,Arial,sans-serif);letter-spacing:.3px;min-height:15px;color:#e6e8ee}
.atelier-charm-subtitle{font:9px/1.5 var(--sans,Inter,Arial,sans-serif);min-height:27px;margin-top:3px;color:#b2b7c4}
.atelier-charm-price{font:10px/1.5 var(--sans,Inter,Arial,sans-serif);color:#dfe2e9;margin-top:7px}
.atelier-charm-check{color:#efedf2;top:7px;right:7px}
.atelier-width-options>button[aria-pressed="true"],.atelier-size-options>button[aria-pressed="true"]{border-color:#c4c5cf;background:#262830;color:#f6f7f9}
.atelier-builder button:focus-visible{outline-color:#e0e1e7}
.atelier-selection-info{gap:10px;min-height:34px;line-height:1.7}
.atelier-selected-description{font-family:var(--sans,Inter,Arial,sans-serif);font-size:10px}
@media(min-width:1500px){.atelier-builder{grid-template-columns:minmax(0,1.55fr) minmax(380px,1fr)}.atelier-charm-option>.atelier-sigil-photo{width:84px;height:84px}.atelier-charm-option{min-height:160px}}
@media(max-width:1100px){.atelier-builder{grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr);gap:28px}.atelier-visual{top:90px}.atelier-hole-navigation{gap:8px}.atelier-hole-navigation>div{gap:4px}.atelier-hole-navigation button{width:24px}.atelier-hole-navigation>span:first-child{font-size:6px;letter-spacing:.5px}.atelier-preview-selection{flex-basis:75px;font-size:8px}.atelier-stage-top,.atelier-stage-bottom{left:15px;right:15px}.atelier-stage-top>span:last-child{font-size:7px}.atelier-stage-top{top:18px}.atelier-stage-bottom{bottom:17px}.atelier-charm-option>.atelier-sigil-photo{height:65px;width:65px}}
@media(max-width:760px){.atelier-builder{grid-template-columns:1fr;gap:32px}.atelier-visual{position:relative;top:auto}.atelier-preview-toolbar{margin-bottom:12px;font-size:11px}.atelier-view-options{gap:22px}.atelier-detail-toggle{gap:7px}.atelier-stage-top,.atelier-stage-bottom{left:19px;right:19px}.atelier-stage-top{top:21px}.atelier-stage-bottom{bottom:19px}.atelier-stage-top>span:last-child{font-size:8px}.atelier-hole-navigation{min-height:67px;gap:12px}.atelier-hole-navigation>span:first-child{font-size:7px;letter-spacing:.7px}.atelier-hole-navigation>div{gap:7px}.atelier-hole-navigation button{width:30px;min-height:35px;font-size:10px}.atelier-preview-selection{font-size:9px;flex-basis:100px}.atelier-charm-options{max-height:none;overflow:visible;gap:9px}.atelier-charm-option{min-height:160px;padding-top:13px}.atelier-charm-option>.atelier-sigil-photo{height:82px;width:82px}.atelier-charm-name{font-size:10px;min-height:15px}.atelier-charm-subtitle{font-size:10px;min-height:29px}.atelier-charm-price{font-size:11px}.atelier-preview-caption{font-size:10px}.atelier-mounting{font-size:9px}}
@media(max-width:420px){.atelier-preview-toolbar{font-size:10px;margin-bottom:10px}.atelier-stage-top,.atelier-stage-bottom{left:14px;right:14px;font-size:6px;letter-spacing:.7px}.atelier-stage-top{top:16px}.atelier-stage-top>span:last-child{font-size:6px;letter-spacing:.7px}.atelier-stage-bottom{bottom:15px}.atelier-stage-bottom>span:first-child,.atelier-stage-bottom>span:last-child{font-size:6px;letter-spacing:.7px}.atelier-hole-navigation{gap:8px;min-height:61px}.atelier-hole-navigation>span:first-child{font-size:6px;letter-spacing:.3px;max-width:45px;line-height:1.7}.atelier-hole-navigation>div{gap:4px}.atelier-hole-navigation button{width:28px;font-size:9px}.atelier-preview-selection{font-size:8px;flex-basis:72px}.atelier-preview-caption,.atelier-reset{font-size:9px}.atelier-mounting{font-size:8px;margin-top:19px}.atelier-charm-options{gap:7px}.atelier-charm-option{min-height:151px;padding-inline:4px}.atelier-charm-option>.atelier-sigil-photo{height:72px;width:72px}.atelier-charm-name{font-size:9px;letter-spacing:.15px}.atelier-charm-subtitle{font-size:9px;min-height:27px}.atelier-charm-price{font-size:10px}}
@media(prefers-reduced-motion:reduce){.atelier-product,.atelier-strap{transition:none}}

.atelier-builder img[hidden]{display:none!important}