/* Viewing controls sit below the picture so the product stays unobstructed. */
.viewer-tools{padding:8px 0 0}
.viewer-tools .view-controls{position:static;transform:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px;width:auto;max-width:none;background:none;box-shadow:none;padding:0;border-radius:0;white-space:normal}
.viewer-tools .view-controls button{min-height:40px;padding:8px 10px}
#viewer #dimensions{bottom:18px}
.fullscreen-exit{display:none}
.viewer:is(:fullscreen,.expanded) .fullscreen-exit{display:block;position:absolute;right:20px;bottom:18px;z-index:3;min-height:44px;padding:10px 16px;background:#fffffff2;color:var(--ink);border-radius:4px}
[data-reset-dimensions]{min-height:36px;padding:5px 9px;border-radius:3px;color:var(--ink);font-size:12px;white-space:nowrap}
[data-reset-dimensions]:hover{background:#eaf0f3}
.dimension-defaults{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;padding:10px 14px;background:#f5f7f8;border-radius:4px;color:#6b7982;font-size:13px;line-height:1.5}
.dimension-defaults small{display:block;font-size:13px;letter-spacing:.015em}
.dimension-defaults button{font-size:13px;border:1px solid #dce3e7;background:white}
.dimension-reset-status{font-size:13px;color:var(--muted);margin:0 0 18px}
.dimension-reset-status:empty{display:none}
.viewer-info>.fine{font-size:12px;margin-bottom:0}
.mobile-preview-bar{display:none}
.viewer-column:has(#fallback:not([hidden])) .viewer-tools{display:none}

@media(max-width:780px){
 /* Recover thumb space below the scene, without shrinking the 3D product. */
 body:has(.mobile-price) .header{height:64px}
 .config-heading{padding-top:10px;padding-bottom:10px}
 .viewer-tools{padding-top:5px}
 .viewer-tools .view-controls{gap:0;flex-wrap:nowrap;justify-content:space-between}
 .viewer-tools .view-controls button{min-width:36px;min-height:44px;padding:8px 5px;font-size:12px}
 .viewer-tools .view-controls #fullscreen{grid-column:auto}
 [data-reset-dimensions]{min-height:44px;padding:5px 8px;font-size:13px}
 .viewer-info>.fine{font-size:13px}
 .viewer-column.mobile-follow{position:sticky;top:0;height:var(--preview-full,550px);z-index:20;overflow-anchor:none;pointer-events:none}
 .mobile-follow .viewer-surface{transform:translate3d(0,var(--preview-exit,0px),0);background:white;border-radius:5px;overflow:hidden;pointer-events:auto}
 .mobile-follow .viewer:not(:fullscreen):not(.expanded){height:var(--preview-height,460px);min-height:0;contain:layout paint}
 /* Crop the same 460px scene instead of resizing it (and refitting the camera). */
 .mobile-follow .viewer:not(:fullscreen):not(.expanded) canvas{height:460px}
 .mobile-follow .viewer:not(:fullscreen):not(.expanded)::before{content:'';position:absolute;inset:0 0 auto;height:460px;background:inherit;pointer-events:none}
 .mobile-follow .viewer:not(:fullscreen):not(.expanded) #fallback{top:70px;bottom:auto;height:320px}
 .mobile-follow .viewer-info{height:var(--preview-info,auto);overflow:hidden;opacity:var(--preview-meta-opacity,1)}
 .mobile-follow .mobile-preview-bar{height:var(--preview-bar,0px);display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:hidden;background:#fff;padding:0 10px;border-radius:0 0 5px 5px}
 .preview-resize{flex:1;min-width:0;height:64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ns-resize;padding:4px 5px;border-radius:4px;outline-offset:-3px}
 .preview-grip{display:block;width:34px;height:3px;border-radius:3px;background:#9aabb5;margin:0 auto 2px;flex-shrink:0}
 .preview-handle-heading{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap}
 .preview-handle-heading small{font-weight:400;color:var(--muted);font-size:12px;margin-left:5px}
 .preview-hint{font-size:12px;line-height:1.2;color:var(--muted)}
 .mobile-preview-bar button{flex-shrink:0;min-width:78px;min-height:44px;padding:7px 10px;font-size:13px;line-height:1.2;border:1px solid #cbd6de;border-radius:4px;color:var(--ink);background:#f5f8fa}
 .mobile-preview-bar button:hover,.preview-resize:hover,.preview-resizing .preview-resize{background:#edf3f6}
 .preview-resizing .preview-grip{background:var(--ink)}
 .preview-resize:focus-visible{outline:2px solid #4688b3}
 .mobile-follow .viewer-top,.mobile-follow .viewer-tools{opacity:var(--preview-meta-opacity,1)}
 .preview-compact .viewer-surface{box-shadow:0 5px 18px #102a3c1a}
 .preview-compact:not(.preview-open) .viewer-top,.preview-compact:not(.preview-open) .viewer-tools{visibility:hidden;pointer-events:none}
 .preview-compact:not(.preview-open) canvas{pointer-events:none}
 .preview-compact:not(.preview-open) .viewer{touch-action:pan-y;border-radius:5px 5px 0 0}
 .preview-open .viewer-tools,.preview-open .viewer-top{opacity:1;visibility:visible}
 .config-panel :is(input,select,button,summary){scroll-margin-top:var(--preview-clearance,260px);scroll-margin-bottom:100px}
 .viewer-column:has(.viewer.expanded){position:static}
 .viewer-column:has(.viewer.expanded) .viewer-surface{transform:none;will-change:auto;overflow:visible}
 .viewer.expanded .viewer-top,.viewer.expanded .viewer-tools{opacity:1;visibility:visible;pointer-events:auto}
 .viewer.expanded canvas{pointer-events:auto}
}
@media(max-width:380px){.preview-handle-heading small{display:none}}
@media print{.mobile-follow{position:static!important;transform:none!important}.mobile-preview-bar{display:none!important}}