/**
 * C3A Designer Premium 1.9.64 — UX 3D docked, split móvel e shortcodes de colocação.
 * CSS original C3A. Sem regras copiadas de plugins concorrentes.
 */

.c3a-3d-dock {
    --c3a-3d-dock-bg: var(--c3a-bg-drawer, #f8fafc);
    --c3a-3d-dock-ink: var(--c3a-text-main, #0f172a);
    width: min(38vw, 420px);
    min-width: 260px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    background: var(--c3a-3d-dock-bg);
    border-left: 1px solid var(--c3a-border, #e2e8f0);
    z-index: 120; /* 1.12.17: acima do topbar (100) para o X/ocultar receber clique */
    overflow: hidden;
}
.c3a-3d-dock[hidden] { display: none !important; }

.c3a-3d-dock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--c3a-border, #e2e8f0);
}
.c3a-3d-dock__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--c3a-3d-dock-ink);
    margin: 0;
}
.c3a-3d-dock__tools {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.c3a-3d-dock__tools button {
    border: 1px solid var(--c3a-border, #e2e8f0);
    background: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    min-height: 32px;
}
.c3a-3d-dock__body {
    flex: 1;
    min-height: 220px;
    position: relative;
}
.c3a-3d-dock .c3a-3d-viewer,
.c3a-3d-dock .c3a-3d-viewer-shell {
    width: 100%;
    height: 100%;
    min-height: 220px;
}
.c3a-3d-dock__status {
    font-size: 11px;
    padding: 6px 10px 8px;
    color: #64748b;
}
.c3a-3d-dock__status.is-ok { color: #15803d; }
.c3a-3d-dock__status.is-error { color: #b91c1c; }

.c3a-3d-dock.is-modal {
    position: fixed;
    inset: 7vh 8vw;
    width: auto;
    max-width: none;
    min-width: 0;
    z-index: 240;
    border: 1px solid var(--c3a-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.c3a-3d-dock.is-modal .c3a-3d-viewer-shell {
    min-height: min(64vh, 560px);
}

.c3a-editor-app.c3a-has-3d-dock .c3a-workspace {
    /* dock is a sibling of the stage */
}

.c3a-3d-mobile-tabs {
    display: none;
    gap: 0;
    border-top: 1px solid var(--c3a-border, #e2e8f0);
    background: var(--c3a-bg-sidebar, #fff);
}
.c3a-3d-mobile-tabs button {
    flex: 1;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    color: var(--c3a-text-muted, #64748b);
}
.c3a-3d-mobile-tabs button.is-active,
.c3a-editor-app.c3a-3d-split-mode-canvas #c3a-3d-split-canvas,
.c3a-editor-app.c3a-3d-split-mode-3d #c3a-3d-split-3d {
    color: var(--c3a-primary, #2B7AB8);
    box-shadow: inset 0 -2px 0 var(--c3a-primary, #2B7AB8);
}

.c3a-btn-preview-3d.is-active {
    outline: 2px solid var(--c3a-primary, #2B7AB8);
    outline-offset: 1px;
}

/* Storefront placements */
.c3a-3d-placement { margin: 12px 0; }
.c3a-view-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.c3a-view-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    min-height: 44px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.c3a-view-thumb.is-active {
    border-color: #2B7AB8;
    box-shadow: 0 0 0 2px rgba(43, 122, 184, 0.18);
}
.c3a-view-thumb__icon { font-size: 18px; }
.c3a-view-thumb__label { font-size: 11px; font-weight: 600; }

.c3a-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.c3a-color-swatch {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}
.c3a-color-swatch.is-active { border-color: #2B7AB8; }
.c3a-color-swatch__chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.15);
}
.c3a-color-swatch__label { font-size: 12px; font-weight: 600; }

.c3a-replace-all-btn { min-height: 36px; }

/* Legacy phone chrome (#c3a-mobile-bottom-bar) removed in 1.9.77 — hard-kill leftovers. */
.c3a-mobile-bottom-bar,
.c3a-mobile-bottom-sheet,
#c3a-mobile-bottom-bar,
#c3a-mobile-bottom-sheet {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 768px) {
    .c3a-editor-app.c3a-has-3d-dock .c3a-workspace {
        flex-wrap: wrap;
    }
    .c3a-editor-app.c3a-has-3d-dock #c3a-stage-viewport {
        flex: 1 1 100%;
        min-height: 36vh;
        height: 38vh;
    }
    .c3a-3d-dock:not(.is-modal) {
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 40vh;
        border-left: 0;
        border-top: 1px solid var(--c3a-border, #e2e8f0);
        order: 8;
    }
    .c3a-3d-mobile-tabs { display: flex; width: 100%; order: 7; }
    .c3a-editor-app.c3a-3d-split-mode-canvas .c3a-3d-dock:not(.is-modal) { display: none; }
    .c3a-editor-app.c3a-3d-split-mode-canvas #c3a-stage-viewport { height: auto; min-height: 52vh; }
    .c3a-editor-app.c3a-3d-split-mode-3d #c3a-stage-viewport { display: none; }
    .c3a-editor-app.c3a-3d-split-mode-3d .c3a-3d-dock:not(.is-modal) { height: 58vh; }
}

@media (prefers-reduced-motion: reduce) {
    .c3a-3d-dock,
    .c3a-3d-dock * {
        transition: none !important;
        animation: none !important;
    }
}

/* 1.9.101 — ângulos da prévia 3D no editor + alternância 2D/3D */
.c3a-3d-dock__views {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px 0;
    border-top: 1px solid var(--c3a-border, #e2e8f0);
}
.c3a-3d-dock__views button {
    flex: 1 1 auto;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--c3a-border, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    color: var(--c3a-text-muted, #475569);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.c3a-3d-dock__views button:hover { border-color: var(--c3a-primary, #2B7AB8); color: var(--c3a-primary, #2B7AB8); }
.c3a-3d-dock__views button.is-active {
    background: color-mix(in srgb, var(--c3a-primary, #2B7AB8) 12%, #fff);
    border-color: var(--c3a-primary, #2B7AB8);
    color: var(--c3a-primary, #2B7AB8);
}
.c3a-3d-dock__views button[data-c3a-3d-view="spin"] { flex: 0 0 34px; font-size: 14px; }
.c3a-3d-dock.is-modal .c3a-3d-dock__views { justify-content: center; }
.c3a-mockup-dock__icon-btn.c3a-mockup-dock__to3d {
    width: auto;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--c3a-primary, #2B7AB8);
}

/* ==========================================================================
   1.9.102 — Prévia 3D no padrão visual da prévia 2D (painel + modal)
   Reaproveita .c3a-mockup-dock__* / .c3a-mockup-modal__* / .c3a-mockup-stage.
   ========================================================================== */
.c3a-3d-dock {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c3a-brand, #2E7BB8) 6%, var(--c3a-surface, #fff)), var(--c3a-surface, #fff) 28%);
}
.c3a-3d-dock__head.c3a-mockup-dock__head { padding: 12px 12px 10px; align-items: flex-start; }
.c3a-3d-dock__heading-text { min-width: 0; }
.c3a-3d-dock .c3a-mockup-dock__tools { flex-wrap: nowrap; }
.c3a-3d-dock .c3a-mockup-dock__tools button { min-height: 0; padding: 0; font-size: inherit; background: color-mix(in srgb, var(--c3a-surface, #fff) 90%, transparent); border-radius: 9px; }
.c3a-3d-dock .c3a-mockup-dock__tools .c3a-mockup-dock__to3d { padding: 0 8px; font-size: 11px; }
.c3a-3d-badge { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.c3a-3d-badge::after { display: none !important; }
.c3a-3d-dock__status.c3a-mockup-dock__meta {
    padding: 0;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c3a-brand, #2E7BB8);
    display: flex;
    align-items: center;
    gap: 5px;
}
.c3a-3d-dock__status.c3a-mockup-dock__meta.is-ok::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
    flex-shrink: 0;
}
.c3a-3d-dock__status.c3a-mockup-dock__meta.is-error { color: #b91c1c; }
.c3a-3d-dock__body { padding: 12px 12px 8px; display: flex; min-height: 240px; }

/* Palco 3D (painel e modal) */
.c3a-3d-stage {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, #94a3b8 24%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,255,255,.92), transparent 70%),
        linear-gradient(165deg, #dbe4ef 0%, #eef2f7 42%, #d7e0ea 100%);
    transition: background .25s ease;
}
.c3a-3d-stage[data-bg="light"] {
    background: radial-gradient(ellipse 75% 70% at 50% 40%, #ffffff 0%, #f8fafc 60%, #e9eef4 100%);
}
.c3a-3d-stage[data-bg="dark"] {
    background: radial-gradient(ellipse 75% 75% at 50% 42%, #3b4a61 0%, #1e293b 55%, #0b1220 100%);
    border-color: rgba(15,23,42,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.c3a-3d-stage[data-bg="transparent"] {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e8edf3 25%, transparent 25%, transparent 75%, #e8edf3 75%),
        linear-gradient(45deg, #e8edf3 25%, transparent 25%, transparent 75%, #e8edf3 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
/* o shell do viewer fica transparente: o fundo é o palco (vale no painel e no modal) */
.c3a-3d-stage .c3a-3d-viewer-shell {
    position: absolute;
    inset: 0;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.c3a-3d-stage .c3a-3d-viewer,
.c3a-3d-stage .c3a-product-3d {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background: transparent !important;
    cursor: grab;
}
.c3a-3d-stage .c3a-3d-viewer:active { cursor: grabbing; }
.c3a-3d-stage .c3a-3d-viewer-shell.is-loading::before {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.7), transparent 70%);
    pointer-events: none;
}
.c3a-3d-stage .c3a-3d-viewer-shell.is-loading::after {
    content: '';
    position: absolute; left: 50%; top: 50%; z-index: 4;
    width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--c3a-brand, #2E7BB8) 25%, transparent);
    border-top-color: var(--c3a-brand, #2E7BB8);
    animation: c3a-mockup-spin .7s linear infinite;
}
.c3a-3d-stage .c3a-3d-viewer-shell.is-ready::before,
.c3a-3d-stage .c3a-3d-viewer-shell.is-ready::after,
.c3a-3d-stage .c3a-3d-viewer-shell.is-error::before,
.c3a-3d-stage .c3a-3d-viewer-shell.is-error::after { display: none; }
.c3a-3d-stage__placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #64748b; font-size: 12px; font-weight: 600; text-align: center; padding: 16px;
}
.c3a-3d-stage__placeholder[hidden] { display: none !important; }

/* Vistas (segmented) — painel */
.c3a-3d-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, #94a3b8 16%, var(--c3a-surface, #fff));
    border: 1px solid color-mix(in srgb, #94a3b8 22%, transparent);
}
.c3a-3d-dock__views.c3a-3d-seg {
    margin: 0 12px 10px;
    border-top: 1px solid color-mix(in srgb, #94a3b8 22%, transparent);
    padding: 3px;
    flex-wrap: nowrap;
}
.c3a-3d-seg button,
.c3a-3d-dock__views.c3a-3d-seg button {
    flex: 1 1 auto;
    min-height: 28px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c3a-text-muted, #475569);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.c3a-3d-seg button:hover { color: var(--c3a-brand, #2E7BB8); background: rgba(255,255,255,.6); }
.c3a-3d-seg button.is-active,
.c3a-3d-dock__views.c3a-3d-seg button.is-active {
    background: #fff;
    color: var(--c3a-brand, #2E7BB8);
    border: 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.08);
}
.c3a-3d-seg button:focus-visible { outline: 2px solid var(--c3a-brand, #2E7BB8); outline-offset: 1px; }
.c3a-3d-dock__views.c3a-3d-seg button[data-c3a-3d-view="spin"] { flex: 0 0 34px; font-size: 14px; padding: 0; }
.c3a-3d-dock__footer.c3a-mockup-dock__footer { margin-top: auto; }

/* Modal 3D — acima do topbar; cabeçalho/X sempre clicáveis (1.12.17)
   1.12.21: corpo com scroll — cenários/composição não ficam cortados pelo footer */
.c3a-3d-modal.c3a-mockup-modal,
#c3a-3d-editor-modal.c3a-modal {
    z-index: 1120 !important;
    width: min(920px, calc(100vw - 28px)) !important;
    /* Evita o topo do modal sumir atrás da barra (54px) */
    top: max(16px, calc(var(--c3a-topbar-h, 54px) + 16px)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - var(--c3a-topbar-h, 54px) - 32px) !important;
    max-height: calc(100dvh - var(--c3a-topbar-h, 54px) - 32px) !important;
    height: auto;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden; /* cantos arredondados; scroll fica no body */
}
/* 1.12.22: posição/tamanho livres (drag + resize + snap) — JS aplica inline !important */
#c3a-3d-editor-modal.c3a-modal.is-windowed,
.c3a-3d-modal.c3a-mockup-modal.is-windowed {
    /* propriedades vindas do C3AModalWindow; só reforça stacking */
    z-index: 1120 !important;
}
.c3a-3d-modal.c3a-mockup-modal[hidden],
#c3a-3d-editor-modal.c3a-modal[hidden] {
    display: none !important;
}
.c3a-modal-backdrop {
    z-index: 1115 !important;
}
/* Painel dock 3D: cabeçalho acima do topbar se houver overlap de hit-test */
.c3a-3d-dock {
    z-index: 120;
    position: relative;
}
.c3a-3d-dock .c3a-3d-dock__head,
.c3a-3d-dock .c3a-mockup-dock__head {
    position: relative;
    z-index: 2;
}
.c3a-3d-modal > .c3a-mockup-modal__header,
.c3a-3d-modal > .c3a-mockup-modal__footer,
.c3a-3d-modal > .c3a-modal-footer {
    flex: 0 0 auto;
}
.c3a-3d-modal .c3a-mockup-modal__body,
.c3a-3d-modal .c3a-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.c3a-3d-modal .c3a-mockup-modal__body::-webkit-scrollbar,
.c3a-3d-modal .c3a-modal-body::-webkit-scrollbar {
    width: 8px;
}
.c3a-3d-modal .c3a-mockup-modal__body::-webkit-scrollbar-thumb,
.c3a-3d-modal .c3a-modal-body::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 8px;
}
.c3a-3d-stage--modal.c3a-mockup-stage {
    display: block;
    padding: 0;
    min-height: 220px;
    height: min(52vh, 480px);
    flex: 0 0 auto;
    border-radius: 16px;
}
.c3a-3d-stage__slot { position: absolute; inset: 0; z-index: 1; }
.c3a-3d-stage__live {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(148,163,184,.3);
    color: #0f172a; font-size: 11px; font-weight: 700;
    box-shadow: 0 2px 10px rgba(15,23,42,.08);
    pointer-events: none;
}
.c3a-3d-stage__live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22); animation: c3a-3d-live 1.8s ease-in-out infinite; }
.c3a-3d-stage__live[data-state="error"] i { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22); animation: none; }
.c3a-3d-stage__live[data-state="working"] i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
@keyframes c3a-3d-live { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.c3a-3d-stage__bgs {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    display: flex; gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(148,163,184,.3);
    box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.c3a-3d-stage__bgs button {
    width: 20px; height: 20px; padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(15,23,42,.18);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.c3a-3d-stage__bgs button:hover { transform: scale(1.1); }
.c3a-3d-stage__bgs button.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c3a-brand, #2E7BB8); }
.c3a-3d-stage__bgs button:focus-visible { outline: 2px solid var(--c3a-brand, #2E7BB8); outline-offset: 2px; }
.c3a-3d-stage__bgs [data-c3a-3d-bg="light"] { background: radial-gradient(circle at 40% 35%, #fff, #e9eef4); }
.c3a-3d-stage__bgs [data-c3a-3d-bg="studio"] { background: linear-gradient(165deg, #dbe4ef, #eef2f7 50%, #c9d5e3); }
.c3a-3d-stage__bgs [data-c3a-3d-bg="dark"] { background: radial-gradient(circle at 40% 35%, #475569, #0f172a); }
.c3a-3d-stage__bgs [data-c3a-3d-bg="transparent"] {
    background-color: #fff;
    background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%, transparent 75%, #cbd5e1 75%), linear-gradient(45deg, #cbd5e1 25%, transparent 25%, transparent 75%, #cbd5e1 75%);
    background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.c3a-3d-stage__hint {
    position: absolute; left: 50%; top: 14px; z-index: 3;
    transform: translateX(-50%);
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.62);
    color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    pointer-events: none;
    transition: opacity .6s ease;
}
.c3a-3d-stage__hint.is-faded { opacity: 0; }
.c3a-3d-stage__controls {
    position: absolute; left: 50%; bottom: 14px; z-index: 3;
    transform: translateX(-50%);
    display: flex; gap: 8px; align-items: center;
    max-width: calc(100% - 24px);
}
.c3a-3d-seg--pill {
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148,163,184,.32);
    box-shadow: 0 6px 22px rgba(15,23,42,.14);
    padding: 4px;
}
.c3a-3d-seg--pill button { min-height: 32px; padding: 5px 14px; font-size: 12.5px; color: #334155; }
.c3a-3d-seg--pill button.is-active { background: var(--c3a-brand, #2E7BB8); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--c3a-brand, #2E7BB8) 40%, transparent); }
.c3a-3d-seg--pill button.is-active:hover { color: #fff; background: var(--c3a-brand, #2E7BB8); }
.c3a-3d-seg--icons button { flex: 0 0 34px; width: 34px; padding: 0; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.c3a-3d-stage[data-bg="dark"] .c3a-3d-stage__live,
.c3a-3d-stage[data-bg="dark"] .c3a-3d-stage__bgs,
.c3a-3d-stage[data-bg="dark"] .c3a-3d-seg--pill { background: rgba(15,23,42,.62); border-color: rgba(255,255,255,.12); }
.c3a-3d-stage[data-bg="dark"] .c3a-3d-stage__live,
.c3a-3d-stage[data-bg="dark"] .c3a-3d-seg--pill button:not(.is-active) { color: #e2e8f0; }
.c3a-3d-stage[data-bg="dark"] .c3a-3d-seg--pill button:not(.is-active):hover { background: rgba(255,255,255,.1); }
.c3a-3d-modal__footer { align-items: center; }
.c3a-3d-modal__footer .c3a-3d-modal__to2d { margin-right: auto; }
.c3a-3d-modal .c3a-btn svg,
.c3a-3d-dock .c3a-btn svg { vertical-align: -3px; }

@media (max-width: 768px) {
    .c3a-3d-modal.c3a-mockup-modal {
        width: 100vw !important;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        top: 0; left: 0;
        transform: none;
        z-index: 100001; /* acima do chrome móvel do editor (barra superior / folha inferior) */
        border-radius: 0 !important;
        border: 0;
    }
    .c3a-3d-modal .c3a-mockup-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px 10px 4px !important;
        overflow-y: auto !important;
    }
    .c3a-3d-stage--modal.c3a-mockup-stage { height: min(42vh, 360px); flex: 0 0 auto; min-height: 220px; }
    .c3a-3d-stage__controls { flex-direction: column; gap: 6px; bottom: 10px; }
    .c3a-3d-seg--pill button { padding: 5px 10px; font-size: 12px; }
    .c3a-3d-seg__label { display: none; }
    .c3a-3d-stage__hint { top: 50px; }
    .c3a-3d-modal__footer { flex-wrap: wrap; }
    .c3a-3d-modal__footer .c3a-btn { flex: 1 1 auto; justify-content: center; }
    .c3a-3d-modal__footer .c3a-3d-modal__to2d { margin-right: 0; }
    .c3a-3d-dock__body { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .c3a-3d-stage__live i { animation: none; }
}

/* ==========================================================================
   1.10.0 — Palco/painel/modal 3D seguem o tema escuro do editor
   ========================================================================== */
body.c3a-theme-dark .c3a-3d-stage,
body.c3a-theme-dark .c3a-3d-stage[data-bg="studio"] {
    background: radial-gradient(ellipse 75% 75% at 50% 42%, #33415a 0%, #1b2436 55%, #0a101c 100%);
    border-color: rgba(148,163,184,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.c3a-theme-dark .c3a-3d-stage[data-bg="light"] { background: radial-gradient(ellipse 75% 70% at 50% 40%, #ffffff 0%, #f1f5f9 60%, #dfe6ee 100%); }
body.c3a-theme-dark .c3a-3d-stage[data-bg="transparent"] {
    background-color: #111827;
    background-image: linear-gradient(45deg, #1f2937 25%, transparent 25%, transparent 75%, #1f2937 75%), linear-gradient(45deg, #1f2937 25%, transparent 25%, transparent 75%, #1f2937 75%);
}
body.c3a-theme-dark .c3a-3d-dock,
body.c3a-theme-dark .c3a-3d-modal.c3a-mockup-modal { background: var(--c3a-bg-card, #1c263c); color: var(--c3a-text-main, #f8fafc); border-color: var(--c3a-border, #232f48); }
body.c3a-theme-dark .c3a-3d-modal .c3a-mockup-modal__header,
body.c3a-theme-dark .c3a-3d-modal .c3a-mockup-modal__footer { background: transparent; border-color: var(--c3a-border, #232f48); }
body.c3a-theme-dark .c3a-3d-modal h2,
body.c3a-theme-dark .c3a-3d-dock .c3a-mockup-dock__title { color: var(--c3a-text-main, #f8fafc); }
body.c3a-theme-dark .c3a-3d-modal .c3a-mockup-modal__subtitle,
body.c3a-theme-dark .c3a-3d-modal .c3a-mockup-modal__note { color: var(--c3a-text-muted, #94a3b8); }
body.c3a-theme-dark .c3a-3d-seg { background: rgba(15,23,42,.72); border-color: rgba(148,163,184,.18); }
body.c3a-theme-dark .c3a-3d-seg button { color: #cbd5e1; }
body.c3a-theme-dark .c3a-3d-seg button:hover { background: rgba(255,255,255,.06); color: #fff; }
body.c3a-theme-dark .c3a-3d-seg button.is-active,
body.c3a-theme-dark .c3a-3d-dock__views.c3a-3d-seg button.is-active { background: #2E7BB8; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
body.c3a-theme-dark .c3a-3d-stage__live,
body.c3a-theme-dark .c3a-3d-stage__bgs { background: rgba(15,23,42,.72); border-color: rgba(148,163,184,.2); color: #e2e8f0; }
body.c3a-theme-dark .c3a-3d-stage__hint { color: #cbd5e1; }
body.c3a-theme-dark .c3a-3d-stage__placeholder { color: #94a3b8; }
body.c3a-theme-dark .c3a-3d-stage .c3a-3d-viewer-shell.is-loading::before { background: radial-gradient(circle at 50% 45%, rgba(15,23,42,.6), transparent 70%); }
body.c3a-theme-dark .c3a-3d-modal .c3a-mockup-modal__close,
body.c3a-theme-dark .c3a-3d-dock .c3a-mockup-dock__icon-btn { color: #cbd5e1; background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.2); }
body.c3a-theme-dark .c3a-3d-modal .c3a-btn--ghost,
body.c3a-theme-dark .c3a-3d-dock .c3a-btn--ghost { color: #e2e8f0; border-color: rgba(148,163,184,.28); background: rgba(255,255,255,.03); }

/* ==========================================================================
   1.12.1 — Modal 3D da loja (PDP) no mesmo chrome do editor
   Sem c3a-editor.css na vitrine: replica header/footer/btn + card centrado.
   ========================================================================== */
.c3a-3d-modal.c3a-3d-modal--studio,
.c3a-3d-modal.c3a-mockup-modal.c3a-3d-modal--studio {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(960px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    /* Altura fixa no viewport: flex interno encaixa stage + dock sem barra de rolagem no modal */
    height: min(92vh, 820px);
    max-height: min(92vh, 820px);
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.c3a-3d-modal.c3a-3d-modal--studio[hidden] { display: none !important; }
.c3a-3d-modal.c3a-3d-modal--studio::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(8, 12, 22, .78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}
body.c3a-3d-modal-open { overflow: hidden; }

.c3a-3d-modal--studio .c3a-mockup-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c3a-brand, #2E7BB8) 14%, transparent), transparent 55%),
        #fff;
    flex: 0 0 auto;
}
.c3a-3d-modal--studio .c3a-mockup-modal__heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.c3a-3d-modal--studio .c3a-mockup-modal__badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c3a-brand, #2E7BB8) 88%, #fff), var(--c3a-brand, #2E7BB8));
    box-shadow: 0 8px 16px color-mix(in srgb, var(--c3a-brand, #2E7BB8) 30%, transparent);
}
.c3a-3d-modal--studio .c3a-mockup-modal__header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0f172a;
}
.c3a-3d-modal--studio .c3a-mockup-modal__subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}
.c3a-3d-modal--studio .c3a-mockup-modal__close,
.c3a-3d-modal--studio button.c3a-mockup-modal__close {
    all: unset;
    box-sizing: border-box !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
}
.c3a-3d-modal--studio .c3a-mockup-modal__close:hover {
    color: #0f172a !important;
    border-color: color-mix(in srgb, var(--c3a-brand, #2E7BB8) 35%, #e2e8f0) !important;
}
.c3a-3d-modal--studio .c3a-mockup-modal__body,
.c3a-3d-modal--studio .c3a-modal-body {
    padding: 10px 14px 6px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 1.12.21: scroll no corpo — controles de cenário/composição acessíveis */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto;
    background: transparent !important;
}
.c3a-3d-modal--studio .c3a-3d-stage--modal,
.c3a-3d-modal.c3a-3d-modal--studio.has-scenes .c3a-3d-stage--modal,
.c3a-3d-modal.has-scenes.c3a-3d-modal--studio .c3a-3d-stage--modal.c3a-mockup-stage {
    position: relative;
    height: min(42vh, 420px) !important;
    flex: 0 1 auto;
    min-height: 220px;
    max-height: min(52vh, 520px);
    overflow: hidden;
    border-radius: 14px;
}
.c3a-3d-modal--studio .c3a-3d-stage__slot {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.c3a-3d-modal--studio .c3a-3d-stage__slot .c3a-3d-viewer-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
}
.c3a-3d-modal--studio .c3a-3d-stage__slot .c3a-product-3d,
.c3a-3d-modal--studio .c3a-3d-stage__slot .c3a-3d-viewer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}
.c3a-3d-modal--studio .c3a-3d-stage__live,
.c3a-3d-modal--studio .c3a-3d-stage__bgs,
.c3a-3d-modal--studio .c3a-3d-stage__hint,
.c3a-3d-modal--studio .c3a-3d-stage__controls {
    z-index: 5;
}
/* Dock de cenários compacto sob o stage (não empurra a caneca para fora da tela) */
.c3a-3d-modal--studio .c3a-scene-bar--product {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 8px 10px;
    gap: 6px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    max-height: none; /* 1.12.21: o body do modal rola — não cortar controles aqui */
    overflow: visible;
}
.c3a-3d-modal--studio .c3a-scene-strip--product {
    gap: 6px;
    padding: 0 0 2px;
    margin: 0;
}
.c3a-3d-modal--studio .c3a-scene-strip--product .c3a-scene-thumb {
    width: 68px;
    height: 44px;
    border-radius: 8px;
}
.c3a-3d-modal--studio .c3a-scene-strip--product .c3a-scene-thumb__label {
    font-size: 9.5px;
    padding: 10px 4px 3px;
}
.c3a-3d-modal--studio .c3a-scene-custom--product,
.c3a-3d-modal--studio .c3a-scene-custom {
    padding: 5px 8px;
    gap: 6px 10px;
    border-radius: 10px;
}
.c3a-3d-modal--studio .c3a-scene-custom__label {
    font-size: 11px;
}
.c3a-3d-modal--studio .c3a-scene-custom .c3a-3d-seg button {
    min-height: 24px;
    padding: 2px 8px;
    font-size: 11.5px;
}
.c3a-3d-modal--studio .c3a-comp--product {
    gap: 6px 10px;
}
.c3a-3d-modal--studio .c3a-comp__seg button {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 11.5px;
}
.c3a-3d-modal--studio .c3a-comp__range input[type=range] {
    width: 88px;
}
/* Aviso legal vai para o rodapé — libera altura do body */
.c3a-3d-modal--studio .c3a-mockup-modal__body > .c3a-mockup-modal__note {
    display: none;
}
.c3a-3d-modal--studio .c3a-mockup-modal__footer,
.c3a-3d-modal--studio .c3a-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 14px 12px !important;
    background: color-mix(in srgb, #fff 92%, #f8fafc);
    border-top: 1px solid #eef2f7;
    flex: 0 0 auto;
}
.c3a-3d-modal--studio .c3a-3d-modal__legal {
    flex: 1 1 180px;
    margin: 0;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #94a3b8;
    text-align: left;
}
.c3a-3d-modal--studio .c3a-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.c3a-3d-modal--studio .c3a-btn--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c3a-brand, #2E7BB8) 92%, #fff), var(--c3a-brand, #2E7BB8));
    color: #fff;
    border-color: color-mix(in srgb, var(--c3a-brand, #2E7BB8) 70%, #0f172a);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px color-mix(in srgb, var(--c3a-brand, #2E7BB8) 28%, transparent);
}
.c3a-3d-modal--studio .c3a-btn--ghost {
    background: #fff;
    color: #0f172a;
    border-color: #e2e8f0;
}
.c3a-3d-modal--studio .c3a-btn--ghost:hover {
    border-color: color-mix(in srgb, var(--c3a-brand, #2E7BB8) 35%, #e2e8f0);
    color: var(--c3a-brand, #2E7BB8);
}

/* Sem chrome duplicado: esconde dock legado se ainda aparecer */
.c3a-3d-modal--studio .c3a3d-dock,
.c3a-3d-modal--studio .c3a3d-hint,
.c3a-product-3d-stage .c3a3d-dock,
.c3a-product-3d-stage .c3a3d-hint { display: none !important; }

.c3a-open-product-3d-wrap { margin: 12px 0 16px; }
.c3a-open-product-3d-wrap .c3a-open-product-3d,
button.c3a-open-product-3d {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid #d7dee8;
    background: #fff;
    color: #0f172a;
    font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.c3a-open-product-3d-wrap .c3a-open-product-3d:hover,
button.c3a-open-product-3d:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.c3a-open-product-3d-wrap .c3a-open-product-3d:focus-visible,
button.c3a-open-product-3d:focus-visible {
    outline: 2px solid #334155;
    outline-offset: 2px;
}
.c3a-open-product-3d__icon {
    display: block;
    flex: 0 0 auto;
    opacity: 0.85;
}

.c3a-product-3d-block--studio { margin: 0 0 18px; }
.c3a-product-3d-block--studio .c3a-3d-stage {
    height: min(56vh, 520px);
    min-height: 360px;
}

.c3a-scene-bar--product {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.c3a-scene-strip--product {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 4px;
}

@media (max-width: 768px) {
    .c3a-3d-modal.c3a-3d-modal--studio,
    .c3a-3d-modal.c3a-mockup-modal.c3a-3d-modal--studio {
        width: 100vw !important;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    .c3a-3d-modal--studio .c3a-3d-stage--modal {
        height: auto !important;
        flex: 1 1 0;
        min-height: 200px;
    }
    .c3a-3d-modal--studio .c3a-mockup-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
    }
    .c3a-3d-modal--studio .c3a-scene-bar--product { max-height: none; }
    .c3a-3d-modal--studio .c3a-3d-modal__legal { flex-basis: 100%; order: 3; }
}

/* ==========================================================================
   1.11.1 / 1.12.14 — Painel “Prévia 3D”: palco preenche o espaço livre, alça
   de altura com snap (arraste entre palco e controles), sem faixa branca nos cenários
   ========================================================================== */
.c3a-3d-dock { --c3a-3d-stage-min: 220px; }
.c3a-3d-dock__body {
    flex: 1 1 auto;
    min-height: calc(var(--c3a-3d-stage-min) + 16px);
    padding: 12px 12px 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.c3a-3d-dock__body > .c3a-3d-stage {
    flex: 1 1 auto;
    min-height: var(--c3a-3d-stage-min);
    height: 100%;
}
/* altura escolhida na alça (px calculado pelo JS a partir do snap / proporção salva) */
.c3a-3d-dock.has-manual-split .c3a-3d-dock__body { flex: 0 0 auto; height: var(--c3a-3d-body-h, auto); }
.c3a-3d-dock__controls {
    flex: 0 0 auto; /* nunca rouba espaço do palco — elimina a área branca sob os cenários */
    min-height: 0;
    max-height: 42%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-top: 2px;
}
.c3a-3d-dock.has-manual-split .c3a-3d-dock__controls {
    flex: 1 1 0;
    min-height: 0;
}
.c3a-3d-dock__controls > * { flex: 0 0 auto !important; }
.c3a-3d-dock__footer.c3a-mockup-dock__footer { margin-top: 0; flex: 0 0 auto; }

/* Alça bem visível: é o controle de “mover a janela” do preview pra cima/baixo */
.c3a-3d-dock__grip {
    position: relative;
    flex: 0 0 auto;
    height: 22px;
    margin: 2px 12px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 8px;
    outline: none;
    background: color-mix(in srgb, #94a3b8 10%, transparent);
    border: 1px dashed color-mix(in srgb, #94a3b8 45%, transparent);
}
.c3a-3d-dock__grip::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.c3a-3d-dock__grip-bar {
    width: 56px; height: 5px; border-radius: 99px;
    background: color-mix(in srgb, #64748b 75%, transparent);
    transition: width .15s ease, background .15s ease, box-shadow .15s ease;
}
.c3a-3d-dock__grip:hover,
.c3a-3d-dock__grip:focus-visible,
.c3a-3d-dock.is-split-dragging .c3a-3d-dock__grip {
    background: color-mix(in srgb, var(--c3a-brand, #2E7BB8) 12%, transparent);
    border-color: var(--c3a-brand, #2E7BB8);
}
.c3a-3d-dock__grip:hover .c3a-3d-dock__grip-bar,
.c3a-3d-dock__grip:focus-visible .c3a-3d-dock__grip-bar,
.c3a-3d-dock.is-split-dragging .c3a-3d-dock__grip-bar { width: 78px; background: var(--c3a-brand, #2E7BB8); }
.c3a-3d-dock__grip:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c3a-brand, #2E7BB8) 40%, transparent); }
.c3a-3d-dock.is-split-snapped .c3a-3d-dock__grip-bar { background: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); }
.c3a-3d-dock__grip-label {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    padding: 1px 7px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; line-height: 1.5; white-space: nowrap;
    color: var(--c3a-text-muted, #475569);
    background: var(--c3a-surface, #fff);
    border: 1px solid color-mix(in srgb, #94a3b8 30%, transparent);
    opacity: 0.92; pointer-events: none; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.c3a-3d-dock.is-split-dragging .c3a-3d-dock__grip-label,
.c3a-3d-dock.is-split-flash .c3a-3d-dock__grip-label,
.c3a-3d-dock__grip:focus-visible .c3a-3d-dock__grip-label { opacity: 1; }
.c3a-3d-dock.is-split-snapped .c3a-3d-dock__grip-label { color: #fff; background: #2563eb; border-color: #2563eb; }
.c3a-3d-dock.is-split-dragging,
.c3a-3d-dock.is-split-dragging * { cursor: row-resize !important; user-select: none !important; }
.c3a-3d-dock.is-split-snapped .c3a-3d-dock__body > .c3a-3d-stage { box-shadow: 0 0 0 2px rgba(37, 99, 235, .45); }
/* guias do snap (mesma camada/cor do snap dos painéis laterais) */
.c3a-panel-snap-guide.c3a-3d-split-guide { height: 2px; }
.c3a-3d-split-tick {
    position: absolute; height: 0;
    border-top: 1px dashed rgba(37, 99, 235, .45);
}
.c3a-3d-split-tick span {
    position: absolute; left: 4px; top: -8px;
    font: 700 9.5px/1 system-ui, sans-serif; color: rgba(37, 99, 235, .8);
    background: rgba(255, 255, 255, .85); padding: 1px 4px; border-radius: 4px;
}
@media (pointer: coarse) {
    .c3a-3d-dock__grip { height: 28px; }
    .c3a-3d-dock__grip-bar { width: 64px; height: 6px; }
}
@media (max-width: 768px) {
    .c3a-3d-dock { --c3a-3d-stage-min: 150px; }
    .c3a-3d-dock__body { min-height: calc(var(--c3a-3d-stage-min) + 12px); padding: 8px 10px 2px; }
    .c3a-3d-dock__controls { max-height: 48%; }
}
@media (max-height: 640px) {
    .c3a-3d-dock { --c3a-3d-stage-min: 170px; }
}

/* Enquadramento vertical (pan) — guia central, botões ↑/↓ e foco por teclado */
.c3a-3d-viewer-shell:focus-visible { outline: 2px solid var(--c3a-brand, #2E7BB8); outline-offset: -2px; }
.c3a-3d-pan-guide {
    position: absolute; left: 8%; right: 8%; top: 50%; height: 0; z-index: 6;
    border-top: 1px dashed rgba(37, 99, 235, .6);
    pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.c3a-3d-pan-guide span {
    position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%);
    padding: 2px 8px; border-radius: 99px; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .72);
}
.c3a-3d-viewer-shell.is-panning .c3a-3d-pan-guide,
.c3a-3d-viewer-shell.is-pan-flash .c3a-3d-pan-guide { opacity: 1; }
.c3a-3d-viewer-shell.is-pan-centered .c3a-3d-pan-guide { border-top: 2px solid #2563eb; }
.c3a-3d-viewer-shell.is-pan-centered .c3a-3d-pan-guide span { background: #2563eb; }
.c3a-3d-pan-nudge {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 7;
    display: flex; flex-direction: column; gap: 4px;
    opacity: 0; transition: opacity .18s ease;
}
.c3a-3d-viewer-shell:hover .c3a-3d-pan-nudge,
.c3a-3d-viewer-shell:focus-within .c3a-3d-pan-nudge,
.c3a-3d-viewer-shell.is-panned .c3a-3d-pan-nudge,
.c3a-3d-viewer-shell.is-panning .c3a-3d-pan-nudge { opacity: 1; }
.c3a-3d-pan-nudge button {
    width: 26px; height: 26px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(148, 163, 184, .38);
    background: rgba(255, 255, 255, .86); color: #334155;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    cursor: pointer; backdrop-filter: blur(6px);
}
.c3a-3d-pan-nudge button:hover { color: var(--c3a-brand, #2E7BB8); border-color: var(--c3a-brand, #2E7BB8); }
.c3a-3d-pan-nudge button:focus-visible { outline: 2px solid var(--c3a-brand, #2E7BB8); outline-offset: 1px; }
.c3a-3d-pan-nudge [data-c3a-3d-pan="center"] { display: none; }
.c3a-3d-viewer-shell.is-panned .c3a-3d-pan-nudge [data-c3a-3d-pan="center"] { display: inline-flex; }
.c3a-3d-pan-nudge button[disabled] { opacity: .4; cursor: default; }
body.c3a-theme-dark .c3a-3d-pan-nudge button,
.c3a-3d-stage[data-bg="dark"] .c3a-3d-pan-nudge button,
.c3a-3d-stage[data-scene] .c3a-3d-pan-nudge button { background: rgba(15, 23, 42, .7); color: #e2e8f0; border-color: rgba(148, 163, 184, .25); }
@media (hover: none) { .c3a-3d-pan-nudge { opacity: .92; } }
/* no modal os fundos ficam no canto superior direito — os botões ficam no meio da borda direita */
.c3a-3d-stage--modal .c3a-3d-pan-nudge { right: 12px; }
body.c3a-theme-dark .c3a-3d-dock__grip-label { background: var(--c3a-bg-card, #1c263c); color: #cbd5e1; border-color: rgba(148, 163, 184, .25); }
body.c3a-theme-dark .c3a-3d-split-tick span { background: rgba(15, 23, 42, .85); color: #93c5fd; }

/* ==========================================================================
   1.12.22 — Janela flutuante da Prévia 3D (arrastar / redimensionar / snap)
   ========================================================================== */
.c3a-modal-window {
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.c3a-modal-window.is-windowed {
    transition: box-shadow .18s ease;
}
.c3a-modal-window .c3a-mockup-modal__header.is-draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
body.c3a-modal-window-dragging .c3a-modal-window .c3a-mockup-modal__header.is-draggable,
body.c3a-modal-window-dragging {
    cursor: grabbing !important;
}
body.c3a-modal-window-dragging .c3a-modal-window,
body.c3a-modal-window-resizing .c3a-modal-window {
    user-select: none;
    -webkit-user-select: none;
}
.c3a-modal-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 6px;
    flex: 0 0 auto;
}
.c3a-modal-window-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.c3a-modal-window-btn:hover {
    color: var(--c3a-brand, #2E7BB8);
    border-color: color-mix(in srgb, var(--c3a-brand, #2E7BB8) 35%, #e2e8f0);
}
.c3a-modal-window-btn:focus-visible {
    outline: 2px solid var(--c3a-brand, #2E7BB8);
    outline-offset: 1px;
}
.c3a-modal-window-btn:disabled {
    opacity: .4;
    cursor: default;
}
.c3a-modal-window-btn svg {
    pointer-events: none;
}
.c3a-modal-window-resize {
    position: absolute;
    z-index: 30;
    background: transparent;
    touch-action: none;
}
.c3a-modal-window-resize-n { top: 0; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.c3a-modal-window-resize-s { bottom: 0; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.c3a-modal-window-resize-e { top: 12px; right: 0; bottom: 12px; width: 8px; cursor: ew-resize; }
.c3a-modal-window-resize-w { top: 12px; left: 0; bottom: 12px; width: 8px; cursor: ew-resize; }
.c3a-modal-window-resize-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.c3a-modal-window-resize-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.c3a-modal-window-resize-se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.c3a-modal-window-resize-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.c3a-modal-window-resize-se::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(100, 116, 139, .55);
    border-bottom: 2px solid rgba(100, 116, 139, .55);
    border-radius: 1px;
    pointer-events: none;
}
.c3a-modal-window.is-maximized .c3a-modal-window-resize { display: none !important; }
.c3a-modal-window.is-compact-locked .c3a-modal-window-resize,
.c3a-modal-window.is-compact-locked .c3a-modal-window-actions { display: none !important; }
.c3a-modal-window.is-windowed .c3a-3d-stage--modal.c3a-mockup-stage,
.c3a-modal-window.is-windowed.has-scenes .c3a-3d-stage--modal.c3a-mockup-stage {
    height: auto;
    flex: 1 1 auto;
    min-height: 200px;
    max-height: none;
}
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="n"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="s"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="n"] *,
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="s"] * { cursor: ns-resize !important; }
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="e"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="w"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="e"] *,
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="w"] * { cursor: ew-resize !important; }
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="ne"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="sw"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="ne"] *,
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="sw"] * { cursor: nesw-resize !important; }
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="nw"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="se"],
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="nw"] *,
body.c3a-modal-window-resizing[data-c3a-mw-resize-dir="se"] * { cursor: nwse-resize !important; }
body.c3a-theme-dark .c3a-modal-window-btn {
    background: #1c263c;
    border-color: #232f48;
    color: #94a3b8;
}
@media (max-width: 900px) {
    .c3a-modal-window-actions,
    .c3a-modal-window-resize { display: none !important; }
}