/* The mask is derived from the exact photograph so colour follows the frame bevels. */
.colour-frame-mask{position:absolute;z-index:2;inset:0;background-color:var(--frame-primary);background-image:url('/assets/img/colours/window-colour-studio-exterior-white-v2.webp');background-position:center;background-size:cover;background-repeat:no-repeat;background-blend-mode:multiply;-webkit-mask:url('/assets/img/colours/window-colour-studio-frame-mask-v9.png') center/cover no-repeat;mask:url('/assets/img/colours/window-colour-studio-frame-mask-v9.png') center/cover no-repeat;mix-blend-mode:var(--primary-blend,normal);opacity:var(--primary-opacity,1);pointer-events:none;transform-origin:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),background-color .18s ease}
.colour-frame-mask--compare{background-color:var(--frame-compare);mix-blend-mode:var(--compare-blend,normal);opacity:var(--compare-opacity,1)}
.colour-frame-detail{position:absolute;z-index:3;inset:0;background:url('/assets/img/colours/window-colour-studio-frame-detail-v3.webp') center/cover no-repeat;-webkit-mask:url('/assets/img/colours/window-colour-studio-frame-mask-v9.png') center/cover no-repeat;mask:url('/assets/img/colours/window-colour-studio-frame-mask-v9.png') center/cover no-repeat;mix-blend-mode:soft-light;opacity:var(--primary-detail-opacity,0);pointer-events:none;transform-origin:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.colour-frame-detail--compare{opacity:var(--compare-detail-opacity,0)}
.colour-compare-layer{display:none}
.colour-scene[data-preview-mode=compare] .colour-compare-layer{display:block}
.colour-scene[data-preview-zoom=true] .colour-render-layer>.colour-frame-mask,.colour-scene[data-preview-zoom=true] .colour-render-layer>.colour-frame-detail{transform:scale(1.17)}
.colour-scene[data-preview-mode=compare]:after{content:'Drag to compare';position:absolute;z-index:7;top:14px;left:50%;padding:7px 10px;border-radius:999px;background:rgba(2,32,43,.84);color:#fff;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;transform:translateX(-50%);pointer-events:none}
.colour-chip{background-image:none!important;background-size:auto!important}
.colour-render-layer{position:absolute;inset:0;isolation:isolate}.colour-render-layer--primary{z-index:1}.colour-render-layer img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.colour-scene[data-preview-zoom=true] .colour-render-layer img{transform:scale(1.17)}
@media(max-width:760px){.colour-render-layer img{object-position:center}}