/* v17: direct photo handling, without a rotation toolbar. Original-photo dialog retained. */
.product-stage{height:auto!important;min-width:0;padding-top:4px}
.product-stage .stage-topline{position:relative;inset:auto;margin:0 0 8px;min-height:22px}
.product-stage .stage-object{height:350px;max-width:100%;margin:6px 0 18px;touch-action:pan-y pinch-zoom;isolation:isolate}
.product-stage .stage-object>img{height:310px;width:310px;max-width:76%;margin:0;mix-blend-mode:normal!important;filter:none;transform:perspective(900px) rotateY(var(--photo-y,0deg)) rotateX(var(--photo-x,0deg));transition:transform .22s ease,opacity .18s ease;user-select:none;-webkit-user-drag:none}
.product-stage .stage-object:not(.is-cutout) .pearl-disc{width:350px;height:350px;max-width:98%;top:0;background:#fff;opacity:1;box-shadow:0 20px 55px #001c1855;border-radius:32px;transform:perspective(900px) rotateY(var(--photo-y,0deg)) rotateX(var(--photo-x,0deg));transition:transform .22s ease}
.product-stage .stage-object.is-cutout .pearl-disc{top:0;width:350px;height:350px;max-width:98%;opacity:.7}
.stage-photo-open{position:absolute;inset:0;z-index:4;width:100%;border:0;background:transparent;cursor:zoom-in;touch-action:pan-y pinch-zoom;border-radius:16px}
.stage-photo-open>span{position:absolute;right:7%;bottom:5%;min-width:44px;height:44px;padding:0 11px;box-sizing:border-box;display:grid;place-items:center;border:1px solid #bad9cb99;border-radius:50px;background:#103c31;color:#f0f6eb;font:600 13px var(--font-ui)}
.stage-photo-open:focus-visible{outline:3px solid #d3efd9;outline-offset:3px}
.stage-object.photo-dragging>img,.stage-object.photo-dragging .pearl-disc{transition:none!important}
.product-stage .floating-spec{position:relative;inset:auto;transform:none!important;margin:0 5% 15px;display:flex;align-items:baseline;gap:12px;width:fit-content;max-width:90%;min-width:0;padding:10px 15px;border-radius:50px;backdrop-filter:none}
.product-stage .floating-spec strong{font-size:23px;margin:0;letter-spacing:-.025em}.product-stage .floating-spec i{display:none}.product-stage .floating-spec>span{font-size:10px}
.product-stage .stage-caption{position:relative;inset:auto;margin:0 5%;padding-top:15px;gap:12px;align-items:center}
.stage-caption>div{min-width:0}.stage-caption h2{overflow-wrap:anywhere}.stage-caption .scene-detail{flex:none}
.product-stage .hotspot{top:292px;left:1%;z-index:6}.product-stage .hotspot-fact{top:345px;z-index:10}
.product-stage .light-handle{z-index:6}
.scene-photo-hint{margin:6px 5% 0;font-size:11px;line-height:1.6;color:#bbd5c8;max-width:440px}
.photo-dialog{width:min(960px,96vw);max-width:96vw;max-height:94dvh;padding:24px;border:1px solid #719a83;border-radius:16px;background:#f5f7f2;color:#153d30;box-sizing:border-box;overflow:auto}
.photo-dialog::backdrop{background:#001b18d9;backdrop-filter:blur(5px)}
.photo-dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.photo-dialog-heading h2{font-family:var(--font-editorial);font-size:clamp(22px,3vw,32px);line-height:1.3;margin:8px 0 15px;overflow-wrap:anywhere}.photo-dialog .eyebrow{font-size:10px;letter-spacing:.12em}
.photo-close{flex:none;width:44px;height:44px;border:1px solid #8fae99;border-radius:50%;background:#fff;color:#123c2c;font-size:27px}
.photo-toolbar{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}.photo-toolbar button{min-width:44px;min-height:44px;padding:8px 13px;border:1px solid #92ac9d;background:#fff;color:#153d30;border-radius:8px;font:600 14px var(--font-ui)}.photo-toolbar button:disabled{opacity:.45}.photo-toolbar output{min-width:54px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.photo-viewport{height:min(56dvh,580px);min-height:220px;max-width:100%;overflow:auto;background:#fff;border:1px solid #dee5dc;border-radius:10px;overscroll-behavior:auto;touch-action:auto}
.photo-viewport img{display:block;max-width:none;max-height:none;width:var(--photo-width,100%);height:auto;margin:auto;object-fit:contain}
.photo-dialog p{font-size:12px;line-height:1.7;margin:12px 0 8px}.photo-dialog a{display:inline-block;font-size:12px;color:#1a5c42;text-decoration:underline;min-height:44px;padding:10px 0}
@media(max-width:760px){.product-stage .stage-object{height:290px;margin:9px 0 14px}.product-stage .stage-object>img{height:255px;width:255px;max-width:78%}.product-stage .stage-object .pearl-disc{width:290px!important;height:290px!important;max-width:100%}.product-stage .floating-spec{margin-left:0;margin-right:0;font-size:10px;padding:9px 13px}.product-stage .floating-spec strong{font-size:22px}.product-stage .stage-caption{margin:0}.product-stage .hotspot{top:250px}.product-stage .hotspot-fact{top:300px}.photo-dialog{padding:17px}.photo-viewport{height:48dvh;min-height:190px}.photo-dialog-heading h2{font-size:23px}.stage-photo-open>span{right:0;bottom:0}}
@media(max-width:360px){.product-stage .stage-object{height:260px}.product-stage .stage-object>img{height:225px;width:225px}.product-stage .stage-object .pearl-disc{height:260px!important;width:260px!important}.product-stage .hotspot{top:220px}.product-stage .floating-spec{max-width:100%}}
.effects-off .stage-object>img,.effects-off .stage-object .pearl-disc{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.stage-object>img,.stage-object .pearl-disc{transform:none!important;transition:none!important}}
@media(forced-colors:active){.stage-object .pearl-disc{background:Canvas!important}.photo-dialog::backdrop{background:Canvas}}

.photo-choices{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}.photo-choices[hidden]{display:none}.photo-choices button{min-height:44px;border:1px solid #789780;border-radius:8px;padding:9px 12px;background:#fff;color:#184432;font:600 12px var(--font-ui)}.photo-choices button[aria-pressed=true]{background:#184432;color:#fff}

.photo-dialog button:focus-visible,.photo-viewport:focus-visible{outline:3px solid #4b8c65;outline-offset:3px}
@media(forced-colors:active){.stage-photo-open>span,.photo-dialog,.photo-toolbar button{border:1px solid ButtonText}}

/* Owner-requested stronger, bounded drag/hover. No layout movement. */
.product-stage .stage-object>img{transform:translateX(var(--photo-shift,0px)) perspective(900px) rotateY(var(--photo-y,0deg)) rotateX(var(--photo-x,0deg))}
.stage-photo-open{cursor:grab}.photo-dragging .stage-photo-open{cursor:grabbing}
@media(prefers-reduced-motion:reduce){.product-stage .stage-object>img{transform:none!important}}
.effects-off .product-stage .stage-object>img{transform:none!important}