/* Empty photo frames and own-design tiles share the accepted add-gift glass. */
body #editorView.active .studio-shell[data-step] :is(button.studio-photo:has(.studio-add-photo),.studio-gallery .studio-design-upload){isolation:isolate;background:linear-gradient(145deg,#fff 2%,#fdfcfb 50%,#f5f3f1 100%)!important;box-shadow:inset 0 2px 2px #ffffffee,inset 0 -3px 5px #b6b0a527,0 10px 20px #5b524817,0 2px 4px #5b52480d;backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);}
/* Keep the original frame mask, proportions and action; only the empty surface changes. */
body #editorView.active .studio-shell[data-step] .studio-photo .studio-add-photo{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;padding:0;container-type:size;}
body #editorView.active .studio-shell[data-step] .studio-photo .studio-add-photo::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 14% 2%,#ffffffc4,transparent 44%);pointer-events:none;}
body #editorView.active .studio-shell[data-step] :is(.studio-add-photo>b,.studio-design-upload>b){position:absolute;left:50%;top:50%;right:auto;bottom:auto;display:block;transform:translate(-50%,-50%);border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none;color:#78736c;padding:0;z-index:3;pointer-events:none;}
body #editorView.active .studio-shell[data-step] .studio-add-photo>b{width:clamp(14px,18cqi,24px);height:clamp(14px,18cqi,24px);}
body #editorView.active .studio-shell[data-step] :is(.studio-add-photo>b,.studio-design-upload>b)>svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 1px 0 #ffffffcc) drop-shadow(0 -.35px .25px #625b5540);}
body #editorView.active .studio-shell[data-step] .studio-add-photo>span{position:absolute;left:5px;right:5px;top:calc(50% + clamp(11px,15cqi,20px));margin:0;text-align:center;white-space:nowrap;font:400 clamp(8px,8cqi,10.5px)/1.25 Onest,system-ui,sans-serif;color:#575451;z-index:3;pointer-events:none;}
body #editorView.active .studio-shell[data-step] .studio-gallery .studio-design-upload{container-type:inline-size;display:block;width:100%;min-width:0;min-height:52.8px;padding:0;border:1px solid #ffffffec!important;border-radius:14px!important;overflow:visible;}
body #editorView.active .studio-shell[data-step] .studio-design-upload::after{content:'';position:absolute;inset:5px;border-radius:9px;border:1px solid #ffffff6b;box-shadow:inset 0 1px 0 #ffffffe0;background:radial-gradient(ellipse at 14% 2%,#ffffffc4,transparent 44%);pointer-events:none;z-index:1;}
body #editorView.active .studio-shell[data-step] .studio-design-upload>b{top:calc(50% - 12px);width:clamp(14px,23cqi,21px);height:clamp(14px,23cqi,21px);}
body #editorView.active .studio-shell[data-step] .studio-design-upload>small{position:absolute;left:3px;right:3px;top:calc(50% - 12px + clamp(8px,13cqi,12px) + 3px);margin:0;text-align:center;white-space:normal;font:400 clamp(8.5px,13cqi,10px)/1.15 Onest,system-ui,sans-serif;color:#575451;z-index:3;pointer-events:none;}
body #editorView.active .studio-shell[data-step] :is(button.studio-photo:has(.studio-add-photo),.studio-design-upload):focus-visible{outline:0;box-shadow:inset 0 0 7px #f47b5c24,inset 0 2px 2px #ffffffee,inset 0 -3px 5px #b6b0a527,0 10px 20px #5b524817,0 2px 4px #5b52480d;}
html.keyboard-input body #editorView.active .studio-shell[data-step] .studio-design-upload:focus-visible{outline:2px solid #767370;outline-offset:3px;}
html.keyboard-input body #editorView.active .studio-shell[data-step] button.studio-photo:has(.studio-add-photo):focus-visible{outline:2px solid #767370;outline-offset:-5px;}

/* Empty frames use the same simple shapes as the approved tile. Uploaded photos retain their original artwork masks. */
body #editorView.active .studio-shell[data-step] button.studio-photo:has(.studio-add-photo){mask-image:none!important;-webkit-mask-image:none!important;border:1px solid #ffffffec!important;border-radius:50%!important;}
body #editorView.active .studio-shell[data-step] button.studio-photo:has(.studio-add-photo[data-glass-shape=square]){border-radius:16%!important;}
body #editorView.active .studio-shell[data-step] .studio-photo .studio-add-photo::after{content:'';position:absolute;inset:5%;border-radius:50%;border:1px solid #ffffffa6;box-shadow:inset 0 1px 1px #ffffffe0,0 1px 2px #8d837315;pointer-events:none;z-index:2;}
body #editorView.active .studio-shell[data-step] .studio-photo .studio-add-photo[data-glass-shape=square]::after{border-radius:12%;}