/* Step 4 is the original visual-options block, still sharing the live poster preview. */
html[data-configurator-step="visual"]{background:#f7f7f7;height:100%;overflow:hidden;overscroll-behavior:none}
html[data-configurator-step="visual"] body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
html[data-configurator-step="visual"] .create-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,56fr) minmax(0,44fr);justify-content:stretch;min-height:0;height:100%;height:100dvh;overflow:hidden;padding:0;background:#f7f7f7}
html[data-configurator-step="visual"] .preview{min-height:0;padding:0;background:#edeef0}
html[data-configurator-step="visual"] .preview-sticky{position:relative;top:auto;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto}
html[data-configurator-step="visual"] .gallery-stage{padding:8px max(16px,var(--safe-right)) 8px max(16px,var(--safe-left));touch-action:none}
html[data-configurator-step="visual"] .poster-stack,
html[data-configurator-step="visual"] .map-arrow{display:none!important}
html[data-configurator-step="visual"] .configuration{width:100%;max-width:450px;min-height:0;align-self:stretch;justify-self:center;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;padding:0 var(--safe-right) 0 var(--safe-left);background:#f7f7f7}
html[data-configurator-step="visual"] #original-format{display:flex;flex-direction:column;min-width:0}
html[data-configurator-step="visual"] .controls{flex:none;gap:16px;padding:2px 16px max(16px,var(--safe-bottom))}
html[data-configurator-step="visual"] legend{margin-bottom:6px}
html[data-configurator-step="visual"] .product-tabs,
html[data-configurator-step="visual"] .steps,
html[data-configurator-step="visual"] .product-heading,
html[data-configurator-step="visual"] .preview-footer{display:none}
.visual-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 16px;padding:6px 0;border:0;background:none;color:#5f6877;font-size:.8125rem;line-height:1.4}
.visual-back:hover{color:#121824}
.visual-back svg{width:8px;height:12px}
.moon-note{margin:-10px 0 0;color:#6b7280;font-size:.8125rem;line-height:1.55}

@media(min-width:1024px){
  html[data-configurator-step="visual"] .create-shell{grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr)}
  html[data-configurator-step="visual"] .preview{padding-bottom:0;align-items:center}
  html[data-configurator-step="visual"] .preview-sticky{height:100%}
  html[data-configurator-step="visual"] .gallery-stage{padding:max(16px,var(--safe-top)) 16px max(16px,var(--safe-bottom))}
  html[data-configurator-step="visual"] .configuration{width:auto;max-width:none;justify-self:stretch;padding-left:0}
  html[data-configurator-step="visual"] .controls{padding-right:max(16px,var(--safe-right))}
}