/* The photograph and canvas share one reserved rectangle: no layout shift. */
.hero-product{min-width:0;display:block;width:100%}
.hero-product-stage{position:relative;width:100%;aspect-ratio:4/3;isolation:isolate}
.hero-product-stage .hero-tin{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;transition:opacity .3s ease}
.hero-product-canvas{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.hero-product-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom;cursor:grab;outline-offset:-4px}
.hero-product-canvas canvas:active{cursor:grabbing}
.hero-product.is-3d-ready .hero-tin{opacity:0;pointer-events:none;animation:none}
.hero-product.is-3d-ready .hero-product-canvas{opacity:1}
.hero-product-ui{position:absolute;bottom:8px;left:0;right:0;text-align:center;padding:0 8px}
.hero-product-load{font:inherit;font-size:14px;font-weight:700;line-height:1.4;min-height:44px;border:1px solid rgba(20,60,50,.2);border-radius:999px;padding:10px 12px;background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer}
.hero-product-load:hover{background:#fff;border-color:var(--focus-700)}
.hero-product-load:disabled{cursor:progress;opacity:.7}
.hero-product-load:focus-visible,.hero-product-canvas canvas:focus-visible{outline:3px solid var(--focus-700);outline-offset:3px}
.hero-product [hidden]{display:none!important}
@media(min-width:921px){.hero-product-stage{transform:scale(1.3);transform-origin:center}}
@media(max-width:900px){.hero-product{max-width:440px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.hero-product-stage .hero-tin,.hero-product-canvas{transition:none;animation:none}}