/* Keep the existing photographs, proportions and palette. Only their transitions move. */
#view-product .product-gallery{position:relative;overflow-anchor:none}
#view-product .gallery-motion-ghost{z-index:2;pointer-events:none;user-select:none;overflow:hidden}
#view-product .gallery-motion-ghost *{pointer-events:none!important}
#view-product #artStage{overflow-anchor:none}
@media(prefers-reduced-motion:reduce){
 #view-product .gallery-motion-ghost{display:none}
}

/* Keep the page's scroll position steady as the original room photo settles. */
@media(max-width:650px){
 html:has(#view-product.active){overflow-anchor:none}
}
@media(max-width:359px){
 #view-product .gallery-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #view-product .gallery-tools button{min-width:0;min-height:44px}
}

/* Preserve the paper and room; only the scale and frame presentation change. */
#view-product .size-guide-art{transition:width .42s cubic-bezier(.4,0,.2,1),height .42s cubic-bezier(.4,0,.2,1)}
@media(max-width:650px){
 #frameOptionsMotion{display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s}
 #frameOptionsMotion>#frameColorField,#frameOptionsMotion>#frameColorField[hidden]{display:block;min-height:0;overflow:hidden}
 #frameOptionsMotion[data-open="false"]{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1),opacity .16s ease,visibility 0s .36s}
}
@media(prefers-reduced-motion:reduce){
 #view-product .size-guide-art,#frameOptionsMotion{transition:none}
}