/* A transparent WebGL canvas over the section's own background. */
.cbx-visual-3d{isolation:isolate;min-height:180px;display:flex;flex-direction:column;gap:6px}.cbx-model-stage{position:relative;width:100%;height:auto;flex:1 1 auto;min-height:0;translate:var(--cbx-model-x,0px) var(--cbx-model-y,0px);z-index:1}.cbx-block .cbx-model-viewer{display:block;width:100%;height:100%;min-height:0;background:transparent;border:0;box-shadow:none;--poster-color:transparent;--progress-bar-color:var(--cbx-accent);--progress-bar-height:0px;--progress-mask:transparent;touch-action:pan-y}.cbx-model-viewer:focus-visible{outline:3px solid var(--cbx-accent);outline-offset:4px}.cbx-model-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none}.cbx-visual-3d[data-model-state=ready] .cbx-model-fallback{display:none}.cbx-model-status{position:absolute;inset:50% 16px auto;translate:0 -50%;z-index:3;text-align:center;font-size:13px;line-height:1.6;color:var(--cbx-muted);pointer-events:none;margin:0}.cbx-visual-3d[data-model-state=ready] .cbx-model-status{display:none}.cbx-visual-3d[data-model-state=error] .cbx-model-status{inset:auto 12px 52px;translate:none;padding:10px 14px;border-radius:8px;background:var(--cbx-surface);border:1px solid var(--cbx-line)}
/* Controls sit below the canvas. Their hit areas remain larger than their icons. */
.cbx-model-tools{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;width:fit-content;margin:0 auto;z-index:4}.cbx-block .cbx-model-tools button{display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--cbx-muted);box-shadow:none;font:inherit;font-size:15px;line-height:1;opacity:.28;cursor:pointer;transition:opacity .18s ease,background-color .18s ease}.cbx-block .cbx-model-tools button[aria-pressed=true]{opacity:.6}.cbx-visual-3d:hover .cbx-model-tools button{opacity:.55}.cbx-block .cbx-model-tools button:hover,.cbx-block .cbx-model-tools button:focus-visible{opacity:1;background:rgba(128,128,128,.08)}.cbx-block .cbx-model-tools button:disabled{opacity:.15;cursor:default}.cbx-block .cbx-model-tools button:focus-visible{outline:2px solid var(--cbx-accent);outline-offset:2px}.cbx-model-hint{position:relative;flex:0 0 auto;z-index:3;pointer-events:none;text-align:center;font-size:10px;line-height:1.6;color:var(--cbx-muted);opacity:.65;margin:0 10px}.cbx-model-empty{padding:24px;border:1px dashed var(--cbx-line);border-radius:12px;color:var(--cbx-muted);font-size:14px}.cbx-visual-3d[data-model-state=error] .cbx-model-hint{display:none}
@media(pointer:coarse){.cbx-block .cbx-model-tools button{width:44px;height:44px;min-width:44px;min-height:44px;opacity:.5}}

/* Keep the floating product clear while loading; retain failure messages. */
.cbx-model-progress,.cbx-model-status:empty{display:none}

/* A poster is shown only after a successful image load, never as a broken image. */
.cbx-model-native-poster{display:none}.cbx-visual-3d[data-model-state=loading] .cbx-model-status{inset:auto 12px 4px;translate:none;font-size:11px;line-height:1.5}.cbx-model-capture{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--cbx-muted)}.cbx-block .cbx-model-capture button{min-height:36px;padding:6px 10px;font:inherit;color:inherit;border:1px dashed var(--cbx-line);border-radius:6px;background:transparent;cursor:pointer}.cbx-block .cbx-model-capture button:disabled{opacity:.4;cursor:default}.cbx-model-capture-status{max-width:320px}

/* These wrappers start display:none in HTML. Only the styled, ready viewer reveals them.
   This also covers a fast model/cache response arriving before the stylesheet. */
.cbx-visual-3d[data-model-state=ready] .cbx-model-tools,.cbx-visual-3d[data-model-state=ready] .cbx-model-capture{display:flex!important}
.cbx-visual-3d[data-model-state=ready] .cbx-model-hint{display:block!important}