/* Activated by the outer page, not by the width of a desktop product pane. */
html[data-layout=mobile]:not([data-mode=product]),html[data-layout=mobile]:not([data-mode=product]) body{height:auto;overflow:visible;background:#f8faf8;font-size:16px;-webkit-text-size-adjust:100%}
html[data-layout=mobile]:not([data-mode=product]) .studio{display:block!important;height:auto!important;min-height:0!important;padding:0!important}
html[data-layout=mobile]:not([data-mode=product]) .preview{height:clamp(480px,135vw,580px)!important;min-height:480px!important}
html[data-layout=mobile]:not([data-mode=product]) .editor{height:auto;max-height:none;overflow:visible;overscroll-behavior:auto;padding:26px 8px 12px}
html[data-layout=mobile] label,html[data-layout=mobile] legend,html[data-layout=mobile] .field-label{font-size:15px;line-height:1.5}
html[data-layout=mobile] #brand-text,html[data-layout=mobile] input[type=file]{font-size:16px;padding:12px;max-width:100%}
html[data-layout=mobile] .mode-tabs{margin-bottom:24px;max-width:100%}
html[data-layout=mobile] .mode-tabs button{font-size:15px;min-height:44px;padding:10px 16px}
html[data-layout=mobile] fieldset{margin-bottom:24px;min-width:0}
html[data-layout=mobile] .swatches{gap:10px;flex-wrap:wrap}
html[data-layout=mobile] .swatches button{width:40px;height:40px;margin:2px;border-width:4px}
html[data-layout=mobile] .silicone-swatches{grid-template-columns:repeat(5,max-content);gap:10px}
html[data-layout=mobile] .size-row output{font-size:15px}
html[data-layout=mobile] input[type=range]{min-height:40px}
html[data-layout=mobile] .ink-label{margin-bottom:24px}
html[data-layout=mobile] input[type=color]{height:44px;width:62px}
html[data-layout=mobile] .note,html[data-layout=mobile] small,html[data-layout=mobile] .upload-help,html[data-layout=mobile] .file-name,html[data-layout=mobile] #editor-message{font-size:14px;line-height:1.65;overflow-wrap:anywhere}
html[data-layout=mobile] .primary{min-height:50px;font-size:15px;padding:14px 18px}
html[data-layout=mobile] .secondary-actions{gap:18px}
html[data-layout=mobile] .secondary-actions button{font-size:14px;min-height:44px}
html[data-layout=mobile] #model{inset:84px 0 110px}
html[data-layout=mobile] #status{font-size:12px;line-height:1.4;bottom:68px;left:16px;right:16px;margin:0}
html[data-layout=mobile] #model[data-ready=true]~#status{display:none}
html[data-layout=mobile] .view-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px 44px;bottom:14px;left:10px;right:10px;gap:4px}
html[data-layout=mobile] .view-controls button{font-size:12px;line-height:1.25;min-width:0;min-height:44px;padding:8px 4px;gap:3px;white-space:normal}
html[data-layout=mobile] .view-controls button[data-view=angle] svg{display:none}
html[data-layout=mobile] .view-controls .zoom-control{min-width:44px;min-height:44px;font-size:20px}
html[data-layout=mobile][data-mode=product] .view-controls #toggle-lid{animation:none}
html[data-layout=mobile][data-mode=product] .view-controls{display:flex;justify-content:flex-end;top:12px;bottom:auto;gap:6px}
html[data-layout=mobile][data-mode=product] #model{inset:64px 0 18px}
@media(max-width:360px){html[data-layout=mobile] .silicone-swatches{gap:8px}html[data-layout=mobile] .swatches button{width:36px;height:36px}}