.metal-open{position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);display:flex;
  align-items:center;justify-content:center;gap:9px;min-height:44px;max-width:calc(100% - 24px);
  padding:10px 16px;border:1px solid #d4c6b7;background:#fffdf8;color:#24282e;
  box-shadow:0 2px 8px #24282e14;font:500 13px/1.3 Montserrat,Arial,sans-serif;white-space:nowrap;cursor:pointer}
.metal-open[hidden],#pdp-mockup-art .metal-open{display:none}
.metal-open svg{flex-shrink:0}
.metal-open:hover{background:#eee6db;border-color:#9b7555}
.metal-viewer{padding:0;border:1px solid #d4c6b7;margin:auto;width:min(1100px,94vw);
  max-width:94vw;height:min(860px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);
  background:#f7f4ee;color:#24282e;overflow:hidden;overscroll-behavior:contain}
.metal-viewer::backdrop{background:rgba(25,29,31,.66)}
.metal-viewer__layout{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.metal-viewer__header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;border-bottom:1px solid #ded6cb}
.metal-viewer__header h2{margin:0;font:400 28px/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:0}
.metal-viewer__close{display:grid;place-items:center;min-width:44px;min-height:44px;padding:10px;
  border:0;background:transparent;color:inherit;cursor:pointer}
.metal-viewer__stage{position:relative;min-height:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#f7f5f0 25%,#e5dfd5 100%)}
.metal-viewer__fallback{position:absolute;width:80%;height:84%;inset:8% 10%;object-fit:contain}
.metal-viewer__canvas-wrap{position:absolute;inset:0}
.metal-viewer__canvas{display:block;width:100%;height:100%;touch-action:pinch-zoom;cursor:grab;
  filter:drop-shadow(3px 8px 6px rgba(25,29,31,.19))}
.metal-viewer__canvas[data-dragging="true"]{cursor:grabbing}
.metal-viewer__footer{padding:14px 20px 20px;border-top:1px solid #ded6cb;font-family:Montserrat,Arial,sans-serif}
.metal-viewer__hint{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 13px;
  font-size:13px;line-height:1.5;text-align:center;color:#49463f}
.metal-viewer__hint svg{flex-shrink:0}
.metal-viewer__controls{display:grid;grid-template-columns:44px 44px minmax(70px,150px) 44px 44px;
  justify-content:center;gap:6px}
.metal-viewer__controls button{display:grid;place-items:center;min-width:44px;min-height:44px;
  border:1px solid #c9bcac;padding:8px;background:#fffcf7;color:#24282e;cursor:pointer;font:500 12px/1.3 Montserrat,Arial,sans-serif}
.metal-viewer__controls button:disabled{opacity:.4;cursor:default}
.metal-viewer__controls button:not(:disabled):hover,.metal-viewer__close:hover{background:#eee6db}
.metal-viewer__status{font-size:13px;line-height:1.5;text-align:center;margin:0 0 10px}
.metal-viewer__modes{display:flex;justify-content:center;gap:24px;padding:0 16px;border-bottom:1px solid #ded6cb}
.metal-viewer__modes button{min-height:48px;padding:10px 0;border:0;border-bottom:2px solid transparent;
  background:transparent;color:#686057;cursor:pointer;font:500 12px/1.4 Montserrat,Arial,sans-serif}
.metal-viewer__modes button[aria-pressed="true"]{border-bottom-color:#9b603b;color:#24282e}
.metal-mount{position:absolute;inset:0;--mount-rx:-8deg;--mount-ry:48deg;--plate-h:250px;--plate-w:175px;--mount-gap:180px}
.metal-mount__viewport{position:absolute;inset:0;perspective:1400px;touch-action:pinch-zoom;cursor:grab}
.metal-mount__viewport[data-dragging="true"]{cursor:grabbing}
.metal-mount__assembly{position:absolute;left:50%;top:48%;width:var(--plate-w);height:var(--plate-h);
  transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--mount-rx)) rotateY(var(--mount-ry)) translateZ(calc(var(--mount-gap) * -.5));transition:transform 1s cubic-bezier(.22,.7,.25,1)}
.metal-mount[data-step="2"] .metal-mount__assembly{transform:translate(-50%,-50%) rotateX(var(--mount-rx)) rotateY(var(--mount-ry)) translateZ(-2px)}
.metal-mount__viewport[data-dragging="true"] .metal-mount__assembly{transition:none}
.metal-mount__wall{position:absolute;inset:-12% -18%;background:linear-gradient(115deg,#f5f1e9,#e3dbce);
  border:1px solid #d5cabb;box-shadow:-6px 8px 0 #cdc2b2;transform-style:preserve-3d}
.metal-mount__shadow{position:absolute;inset:10% 13%;background:#54493612;box-shadow:12px 16px 22px #54493614;
  transition:background .8s,box-shadow .8s}
.metal-mount__magnet{position:absolute;left:50%;top:50%;width:calc(var(--plate-w) * .75);height:calc(var(--plate-h) * .75);
  display:grid;place-items:center;background:linear-gradient(125deg,#505151,#242627);border:1px solid #555;
  color:#f7f4ee;box-shadow:1px 1px 0 #131516;transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(calc(var(--mount-gap) * .42));transition:transform .85s cubic-bezier(.22,.7,.25,1)}
.metal-mount__magnet svg{width:26px;height:26px;max-width:30%;max-height:30%;opacity:.65}
.metal-mount__plate{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--mount-gap));
  transition:transform 1s cubic-bezier(.22,.7,.25,1);box-shadow:1px 1px 0 #a5a9aa}
.metal-mount__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transform:translateZ(.2px)}
.metal-mount__back{position:absolute;inset:0;background:linear-gradient(120deg,#bdc0c0,#e1e2e1 45%,#a4a8a9);
  transform:translateZ(-1px) rotateY(180deg);backface-visibility:hidden}
.metal-mount__label{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);
  padding:4px 7px;border:1px solid #d2c8bc;background:#fffcf7;color:#49463f;white-space:nowrap;font:500 12px/1.3 Montserrat,Arial,sans-serif}
.metal-mount__wall>.metal-mount__label{left:18%;bottom:auto;top:7%;border:0;background:transparent}
.metal-mount__magnet>.metal-mount__label{bottom:calc(100% + var(--plate-h) * .14);
  transform:translateX(-50%) rotateY(calc(var(--mount-ry) * -1)) rotateX(calc(var(--mount-rx) * -1)) translateZ(90px)}
.metal-mount__magnet>.metal-mount__label::after{content:"";position:absolute;left:50%;top:100%;height:calc(var(--plate-h) * .1);border-left:1px solid #b5a18a}
.metal-mount__plate>.metal-mount__label{bottom:auto;top:calc(100% + 14px)}
.metal-mount[data-step="1"] .metal-mount__magnet,.metal-mount[data-step="2"] .metal-mount__magnet{transform:translate(-50%,-50%) translateZ(2px)}
.metal-mount[data-step="2"] .metal-mount__plate{transform:translateZ(4px)}
.metal-mount[data-step="2"] .metal-mount__shadow{background:#54493622;box-shadow:4px 6px 8px #54493633}
.metal-mount[data-step="2"] .metal-mount__magnet>.metal-mount__label,.metal-mount[data-step="2"] .metal-mount__wall>.metal-mount__label{visibility:hidden}
.metal-mount__angle{position:absolute;right:12px;top:10px;min-height:44px;padding:8px 10px;border:1px solid #c9bcac;
  background:#fffcf7;color:#49463f;cursor:pointer;font:500 11px/1.3 Montserrat,Arial,sans-serif}
.metal-mount__angle[aria-pressed="true"]{border-color:#9b603b;background:#eee6db}
.metal-mount__hint{position:absolute;left:16px;right:16px;bottom:8px;margin:0;pointer-events:none;text-align:center;
  font:400 12px/1.4 Montserrat,Arial,sans-serif;color:#686057}
.metal-mount__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:540px;margin:auto}
.metal-mount__steps button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 2px;
  border:0;border-bottom:2px solid #ded6cb;background:transparent;color:#686057;font:500 12px/1.3 Montserrat,Arial,sans-serif;cursor:pointer}
.metal-mount__steps button[aria-current="step"]{border-color:#9b603b;color:#24282e}
.metal-mount__steps button span{color:#9b603b;font-variant-numeric:tabular-nums}
.metal-mount__caption{max-width:540px;min-height:3em;margin:12px auto;text-align:center;font-size:13px;line-height:1.5}
.metal-mount__caption p{margin:0}
.metal-mount__next{display:flex;align-items:center;justify-content:center;gap:14px;min-height:46px;width:100%;max-width:360px;
  margin:auto;padding:10px 16px;border:1px solid #24282e;background:#24282e;color:#fffcf7;cursor:pointer;font:500 12px/1.4 Montserrat,Arial,sans-serif}
.metal-mount__next:hover{background:#414446}
.metal-mount__viewport:focus-visible{outline:2px solid #9b603b;outline-offset:-3px}
.metal-viewer [hidden]{display:none}
.metal-viewer__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.metal-open:focus-visible,.metal-viewer button:focus-visible,.metal-viewer__canvas:focus-visible{outline:2px solid #9b603b;outline-offset:-3px}
@media(max-width:600px){
  .metal-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0}
  .metal-viewer__header{padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px 16px;gap:8px}
  .metal-viewer__header h2{font-size:23px}
  .metal-viewer__footer{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .metal-viewer__controls{grid-template-columns:44px 44px minmax(0,120px) 44px 44px}
  .metal-open{bottom:12px;font-size:12px;padding:10px 12px}
}
@media(max-height:500px){
  .metal-viewer{height:100dvh;max-height:100dvh}
  .metal-viewer__header{padding-top:0;padding-bottom:0}
  .metal-viewer__footer{padding-top:6px;padding-bottom:6px}
  .metal-viewer__hint{margin-bottom:6px;font-size:12px}
  .metal-mount__steps{gap:4px}
  .metal-mount__steps button{font-size:11px;gap:5px}
  .metal-mount__caption{font-size:12px;margin:10px auto}
  .metal-mount__angle{top:4px}
}
@media(max-height:500px) and (min-width:600px){
  .metal-viewer[data-mode="mount"] .metal-viewer__layout{grid-template-columns:minmax(0,1fr) minmax(240px,32%);grid-template-rows:auto auto minmax(0,1fr)}
  .metal-viewer[data-mode="mount"] .metal-viewer__header,.metal-viewer[data-mode="mount"] .metal-viewer__modes{grid-column:1 / -1}
  .metal-viewer[data-mode="mount"] .metal-viewer__footer{align-self:center;border-top:0;padding:8px 12px;border-left:1px solid #ded6cb}
}
@media(prefers-reduced-motion:reduce){.metal-mount__assembly,.metal-mount__magnet,.metal-mount__plate,.metal-mount__shadow{transition:none}}