/* Product studio canvases fill one neutral surface in both colour modes.
   Insets trim only reviewed empty margins; the original file remains the zoom target. */
:root{--product-frame-surface:#f3f3f3}
body main :is(.catalogue-image,.solution-card-image,.model-image,.detail-image,.page-background-product-visual):has(.product-photo),
body main .product-image-trigger[data-product-tone],
body main :is(.model-card .model-image,.detail-image,.page-background-product-visual)>.product-image-trigger[data-product-tone]{background:var(--product-frame-surface);isolation:isolate}
body main .product-image-trigger[data-product-tone] img.product-photo{width:100%;height:100%;padding:0;object-fit:contain!important;object-position:center;background:transparent;transform:none;transition:none;object-view-box:var(--product-crop,inset(0))}
body main .product-image-trigger[data-product-tone=white] img.product-photo{mix-blend-mode:darken}
body main .product-image-trigger[data-product-tone]:is(:hover,:focus-visible) img.product-photo{transform:none}
/* Application diagrams stay readable at their supplied aspect ratio. */
main .technical-figure{margin:24px 0 0;max-width:560px}
main .technical-figure .product-image-trigger{display:block;position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden}
body main .technical-figure .product-image-trigger img.product-photo{display:block;width:100%;height:auto;max-height:none}
main .technical-figure figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:var(--muted)}
/* Dynamic comparisons use the same framing without blending into surrounding text. */
#model-compare-dialog .compare-image-frame{display:block;height:160px;width:100%;margin-bottom:20px;border-radius:12px;overflow:hidden;background:var(--product-frame-surface);isolation:isolate}
#model-compare-dialog .compare-image-frame img{display:block;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:transparent;object-fit:contain;object-position:center;object-view-box:var(--product-crop,inset(0))}
#model-compare-dialog .compare-image-frame img[data-product-tone=white]{mix-blend-mode:darken}
/* Reviewed scene photos fill the same frames without studio padding, in every browser. */
body main .product-image-trigger[data-product-fit=cover] img.product-photo{padding:0;object-fit:cover!important;object-view-box:inset(0);transition:transform .5s var(--ease)}
#model-compare-dialog .compare-image-frame img[data-product-fit=cover]{padding:0;object-fit:cover;object-view-box:inset(0)}
/* A single icon-only affordance; the whole image remains the accessible zoom link. */
body main .product-image-trigger .image-magnifier{position:absolute;right:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #31386c26;border-radius:50%;background:#fff;color:#31386c;box-shadow:0 3px 12px #091a351a;opacity:1;transform:none;transition:opacity .2s ease,transform .25s var(--ease);pointer-events:none}
body main .product-image-trigger .image-magnifier svg{width:20px;height:20px;flex:none}
@media (hover:hover) and (pointer:fine){
 body main .product-image-trigger .image-magnifier{opacity:0;transform:translateY(6px) scale(.94)}
 body main .product-image-trigger:is(:hover,:focus-visible) .image-magnifier{opacity:1;transform:none}
 body main .product-image-trigger[data-product-fit=cover]:hover img.product-photo{transform:scale(1.035)}
}
/* Hybrid touch devices also need a persistent, discoverable cue. */
@media (any-pointer:coarse){body main .product-image-trigger .image-magnifier{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 body main .product-image-trigger .image-magnifier,body main .product-image-trigger[data-product-fit=cover] img.product-photo{transition:none}
 body main .product-image-trigger[data-product-fit=cover]:hover img.product-photo{transform:none}
}
@media print{body main .product-image-trigger[data-product-tone],#model-compare-dialog .compare-image-frame{background:#fff}body main .product-image-trigger[data-product-tone=white] img.product-photo,#model-compare-dialog .compare-image-frame img[data-product-tone=white]{mix-blend-mode:normal}}