/* ═══════════════════════════════════════════════════════════════
   OCEANICA — Light Theme v5.0
   Simulador 3D de Uniformes — Icone Sports-style
   (custom icon sidebar + modals projecting native panels)
   ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
    --oc-bg:            #f6f8fa;
    --oc-bg-soft:       #eef1f4;
    --oc-surface:       #ffffff;
    --oc-surface-2:     #fafbfc;

    --oc-text:          #2d3748;
    --oc-text-2:        #4a5568;
    --oc-text-muted:    #718096;
    --oc-text-soft:     #a0aec0;

    --oc-border:        #e2e8f0;
    --oc-border-2:      #cbd5e0;
    --oc-divider:       #edf0f3;

    --oc-brand:         #dc2626;
    --oc-brand-2:       #b91c1c;
    --oc-brand-soft:    rgba(220, 38, 38, 0.10);

    --oc-cta:           #f7941d;
    --oc-cta-hover:     #e08316;
    --oc-cta-soft:      rgba(247, 148, 29, 0.12);

    --oc-shadow-xs:     0 1px 2px rgba(15, 23, 42, 0.04);
    --oc-shadow-sm:     0 2px 6px rgba(15, 23, 42, 0.06);
    --oc-shadow:        0 6px 20px rgba(15, 23, 42, 0.08);
    --oc-shadow-lg:     0 16px 40px rgba(15, 23, 42, 0.12);
    --oc-shadow-xl:     0 24px 60px rgba(15, 23, 42, 0.18);

    --oc-radius-sm:     8px;
    --oc-radius:        12px;
    --oc-radius-lg:     18px;
    --oc-radius-pill:   999px;

    --oc-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --oc-dur:           220ms;

    --oc-header-h:      64px;
    --oc-footer-h:      32px;
    --oc-action-bar-h:  82px;
    --oc-sidebar-w:     280px;
}

/* ═══════════════════════════════════════════
   0. RESET & GLOBAL
   ═══════════════════════════════════════════ */

body, html {
    background: var(--oc-bg) !important;
    color: var(--oc-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

#root, .App {
    background: var(--oc-bg) !important;
    color: var(--oc-text) !important;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden !important;
    position: relative;
}

/* Three.js view — coluna externa (flex) com altura inline vinda do bundle.
   Cobre `calc(100vh - 100px)` e a forma serializada `calc(-100px + 100vh)`. */
#root div[style*="calc(-100px + 100vh)"],
#root div[style*="calc(100vh - 100px)"] {
    height: calc(-300px + 130vh) !important;
    margin-top: 50px !important;
    max-height: none !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--oc-border-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--oc-text-soft); }
::selection { background: var(--oc-brand); color: #fff; }


/* ═══════════════════════════════════════════
   1. HIDE BUNDLE LEGACY UI
   ═══════════════════════════════════════════ */

header[class*="MuiAppBar"],
.MuiAppBar-root {
    display: none !important;
}

.styles_icons__Qf2b\+,
div[class*="styles_icons__"] {
    display: none !important;
}

#root h1, #root h2 {
    display: none !important;
}

img[src*="SELO"], img[src*="selo"], img[src*="bg-export"],
img[src*="watermark"], div[class*="selo"], div[class*="stamp"] {
    display: none !important;
}

img[alt="logo"]:not(.oc-keep), .logo:not(.oc-keep) {
    display: none !important;
}

a[href*="gtxsports"], a[href*="simuladorgtx"],
div[class*="styles_footer"], div[class*="styles_powered"],
div[class*="styles_info"], div[class*="styles_navbar"] {
    display: none !important;
}

#root nav[aria-label="breadcrumb"],
#root [class*="MuiBreadcrumbs"] {
    display: none !important;
}

/* Social icon links (the footer Box itself is hidden via JS) */
#root a[href*="facebook.com"],
#root a[href*="twitter.com"],
#root a[href*="instagram.com"],
#root a[href*="wa.me/"],
#root a[href*="whatsapp"],
#root a[href^="tel:"],
#root a[href^="mailto:"] {
    display: none !important;
}

/* HIDE the native MuiList nav (but keep it in DOM so React state lives) */
#root nav.MuiList-root.hideScrollbar.oc-native-hidden,
#root nav.MuiList-root.hideScrollbar {
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 320px !important;
    max-width: 320px !important;
    max-height: 80vh !important;
    height: auto !important;
    overflow: auto !important;
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/*
 * While opening the native <input type="file"> from custom LOGOS UI, relax
 * visibility/pointer-events so Blink/WebKit allow showPicker()/click() on inputs
 * that live inside the hidden nav (see triggerNativeFileInput).
 */
body.oc-unlock-file-picker #root nav.MuiList-root.hideScrollbar,
body.oc-unlock-file-picker #root nav.MuiList-root.hideScrollbar.oc-native-hidden {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 0.01 !important;
    z-index: 9400 !important;
}

/* Projected content INSIDE a modal — make it visible again */
.oc-modal-projected,
.oc-modal-projected-row {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
}


/* ═══════════════════════════════════════════
   2. CANVAS BACKGROUND
   ═══════════════════════════════════════════ */

canvas {
    background:
        radial-gradient(ellipse at 50% 55%, #ffffff 0%, #eef1f4 60%, #dfe5ea 100%) !important;
}

#oc-canvas-overlay {
    position: fixed;
    top: var(--oc-header-h);
    left: var(--oc-sidebar-w);
    right: 0;
    bottom: var(--oc-footer-h);
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(45, 55, 72, 0.025) 0px,
            rgba(45, 55, 72, 0.025) 1px,
            transparent 1px,
            transparent 60px);
}

#oc-vignette {
    position: fixed;
    top: var(--oc-header-h);
    left: var(--oc-sidebar-w);
    right: 0;
    bottom: var(--oc-footer-h);
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 55%,
        rgba(15, 23, 42, 0.05) 100%);
}


/* ═══════════════════════════════════════════
   3. SPLASH
   ═══════════════════════════════════════════ */

#oc-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--oc-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s var(--oc-ease), visibility 0.5s;
}

#oc-splash.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#oc-splash .splash-logo {
    width: 110px;
    height: auto;
    animation: oc-pulse 1.8s var(--oc-ease) infinite;
    filter: drop-shadow(0 6px 16px rgba(220, 38, 38, 0.18));
}

#oc-splash .splash-text {
    margin-top: 18px;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--oc-text-2);
    opacity: 0;
    animation: oc-fade-up 0.6s var(--oc-ease) 0.2s forwards;
}

#oc-splash .splash-bar {
    margin-top: 22px;
    width: 200px;
    height: 2px;
    background: var(--oc-border);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    animation: oc-fade-up 0.6s var(--oc-ease) 0.4s forwards;
}

#oc-splash .splash-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--oc-brand), var(--oc-cta));
    animation: oc-loading-bar 2.2s var(--oc-ease) 0.5s forwards;
}

@keyframes oc-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.9; }
}
@keyframes oc-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes oc-loading-bar {
    0% { width: 0%; }
    40% { width: 55%; }
    80% { width: 85%; }
    100% { width: 100%; }
}


/* ═══════════════════════════════════════════
   4. HEADER
   ═══════════════════════════════════════════ */

#oc-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--oc-header-h);
    z-index: 1000;
    background: var(--oc-surface);
    border-bottom: 1px solid var(--oc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    box-sizing: border-box;
    box-shadow: var(--oc-shadow-xs);
}

.oc-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.oc-hamburger {
    display: none;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-hamburger:hover {
    border-color: var(--oc-cta);
    color: var(--oc-cta-hover);
}

.oc-header-logo {
    height: 38px;
    width: auto;
    cursor: pointer;
    transition: opacity var(--oc-dur) var(--oc-ease);
}
.oc-header-logo:hover { opacity: 0.85; }

.oc-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--oc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.oc-header-breadcrumb .crumb-home {
    cursor: pointer;
    font-size: 14px;
    color: var(--oc-text-2);
    transition: color var(--oc-dur);
}
.oc-header-breadcrumb .crumb-home:hover { color: var(--oc-brand); }

.oc-header-breadcrumb .crumb-sep {
    color: var(--oc-text-soft);
    font-size: 10px;
}

.oc-header-breadcrumb .crumb-active {
    color: var(--oc-brand);
    font-weight: 700;
}

.oc-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oc-cart-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-cta);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: 0 4px 10px rgba(247, 148, 29, 0.25);
}
.oc-cart-btn:hover {
    background: var(--oc-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(247, 148, 29, 0.35);
}

.oc-header-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--oc-radius-sm);
    background: #fff;
    border: 1px solid var(--oc-border);
    color: var(--oc-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
.oc-header-icon-btn:hover {
    background: var(--oc-bg);
    border-color: var(--oc-text-muted);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.oc-header-icon-btn svg { display: block; }


/* ═══════════════════════════════════════════
   5. CUSTOM SIDEBAR — Icone Sports style
   ═══════════════════════════════════════════ */

#oc-sidebar {
    position: fixed;
    top: var(--oc-header-h);
    left: 0;
    bottom: var(--oc-footer-h);
    width: var(--oc-sidebar-w);
    background: var(--oc-surface);
    border-right: 1px solid var(--oc-border);
    z-index: 900;
    padding: 24px 22px 28px;
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: var(--oc-shadow-xs);
}

#oc-sidebar::before {
    content: 'PERSONALIZAÇÃO';
    display: block;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: var(--oc-text-muted);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--oc-divider);
    margin-bottom: 20px;
}

/* ── 5a. Top grid: MODELO / LOGOS as icon cards ── */

.oc-side-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.oc-side-card {
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    padding: 14px 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: var(--oc-shadow-xs);
    font-family: inherit;
    color: var(--oc-text);
    position: relative;
    overflow: hidden;
}

.oc-side-card:hover {
    border-color: var(--oc-cta);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.18);
}

.oc-side-card::before {
    content: '';
    position: absolute;
    top: 8px; bottom: 8px; left: 0;
    width: 3px;
    background: var(--oc-cta);
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform var(--oc-dur) var(--oc-ease);
}
.oc-side-card:hover::before {
    transform: scaleY(1);
}

.oc-side-card-label {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--oc-text-2);
    text-transform: uppercase;
    text-align: center;
}

.oc-side-card:hover .oc-side-card-label {
    color: var(--oc-cta-hover);
}

.oc-side-card-thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--oc-bg-soft);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--oc-border-2);
    transition: border-color var(--oc-dur);
}

.oc-side-card:hover .oc-side-card-thumb {
    border-color: var(--oc-cta);
}

.oc-side-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oc-text-2);
    transition: color var(--oc-dur);
}

.oc-side-card-icon svg {
    width: 38px;
    height: 38px;
}

.oc-side-card:hover .oc-side-card-icon {
    color: var(--oc-cta-hover);
}

/* MODELO card spans both columns (matches Icone print) */
.oc-side-modelo {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 14px;
}
.oc-side-modelo .oc-side-card-label {
    text-align: left;
    flex: 1;
}
.oc-side-modelo .oc-side-card-thumb {
    width: 54px;
    height: 54px;
}

.oc-side-divider {
    height: 1px;
    background: var(--oc-divider);
    margin: 18px 0;
}

.oc-side-label-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.oc-side-label {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--oc-text-muted);
    text-transform: uppercase;
}

/* ── 5b. CORES section: rows of part + swatch pills ── */

.oc-cores-pills {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oc-cor-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-pill);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-cor-pill:hover {
    border-color: var(--oc-cta);
    background: var(--oc-cta-soft);
    transform: translateX(2px);
}

.oc-cor-pill-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--oc-text);
    letter-spacing: 0.4px;
}

.oc-cor-pill:hover .oc-cor-pill-label {
    color: var(--oc-cta-hover);
}

.oc-cor-pill-swatch {
    display: flex;
    width: 46px;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--oc-border-2);
    background: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 50%, #f3f4f6 50%, #f3f4f6 100%);
}
.oc-cor-pill-half-1 {
    flex: 1;
    height: 100%;
    background: #e5e7eb;
}
.oc-cor-pill-half-2 {
    flex: 1;
    height: 100%;
    background: #f3f4f6;
    border-left: 1px solid var(--oc-border);
}

/* ── 5c. MANGAS E GOLA: dark horizontal bar (matches Icone print) ── */

.oc-mangas-bar {
    width: 100%;
    height: 32px;
    background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
    border-radius: var(--oc-radius-pill);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
}
.oc-mangas-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
}
.oc-mangas-bar-text {
    color: #fff;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0.85;
}

.oc-mobile-close {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--oc-bg-soft);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--oc-text-2);
    font-size: 14px;
    align-items: center;
    justify-content: center;
}


/* ═══════════════════════════════════════════
   6. MODAL SHELL
   ═══════════════════════════════════════════ */

#oc-modal-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9000;
    display: none;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: oc-fade-in 220ms var(--oc-ease);
}

#oc-modal-root.oc-modal-active {
    display: flex;
}

@keyframes oc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes oc-modal-pop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.oc-modal {
    background: var(--oc-surface);
    border-radius: 16px;
    box-shadow: var(--oc-shadow-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: oc-modal-pop 280ms var(--oc-ease);
    max-height: calc(100vh - 48px);
}

.oc-modal-variant-large {
    width: min(1200px, 95vw);
    height: min(820px, 90vh);
}

.oc-modal-variant-medium {
    width: min(560px, 95vw);
    max-height: min(760px, 90vh);
}

.oc-modal-variant-small {
    width: min(440px, 95vw);
    max-height: min(680px, 88vh);
}

.oc-modal-header {
    flex: 0 0 auto;
    padding: 18px 24px;
    border-bottom: 1px solid var(--oc-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--oc-surface-2);
}

.oc-modal-title {
    margin: 0;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2.8px;
    color: var(--oc-text);
    text-transform: uppercase;
    display: block !important;
    opacity: 1 !important;
}

.oc-modal-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--oc-text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--oc-dur);
}
.oc-modal-close:hover {
    background: var(--oc-bg-soft);
    color: var(--oc-text);
}

.oc-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px 24px 26px;
}

.oc-modal-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--oc-text-muted);
    font-size: 13px;
}

.oc-modal-block {
    margin-bottom: 22px;
}
.oc-modal-block:last-child { margin-bottom: 0; }

.oc-modal-block-title {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--oc-text-muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.oc-modal-block-content {
    background: var(--oc-surface-2);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    padding: 14px;
}


/* ═══════════════════════════════════════════
   7. MODELOS MODAL
   ═══════════════════════════════════════════ */

.oc-modelos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 14px;
}

.oc-modelo-card {
    position: relative;
    background: var(--oc-surface);
    border: 1.5px solid var(--oc-border);
    border-radius: var(--oc-radius);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--oc-dur) var(--oc-ease);
    animation: oc-fade-up 320ms var(--oc-ease) backwards;
}

.oc-modelo-card:hover {
    border-color: var(--oc-cta);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(247, 148, 29, 0.22);
}

.oc-modelo-card.active {
    border-color: var(--oc-cta);
    box-shadow: 0 0 0 3px var(--oc-cta-soft);
}

.oc-modelo-card-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--oc-surface);
    transition: transform var(--oc-dur);
}
.oc-modelo-card:hover .oc-modelo-card-img {
    transform: scale(1.04);
}

.oc-modelo-card-num {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--oc-text);
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    letter-spacing: 0.5px;
    box-shadow: var(--oc-shadow-xs);
}


/* ═══════════════════════════════════════════
   8. CORES MODAL (tabs + #color-pallet portal host)
   ═══════════════════════════════════════════ */

.oc-cores-tabs {
    display: flex;
    background: var(--oc-bg-soft);
    border-radius: var(--oc-radius-pill);
    padding: 4px;
    gap: 4px;
    margin-bottom: 18px;
}

.oc-cores-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 6px;
    border-radius: var(--oc-radius-pill);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--oc-text-muted);
    transition: all var(--oc-dur) var(--oc-ease);
    text-transform: uppercase;
}

.oc-cores-tab:hover {
    color: var(--oc-text);
}

.oc-cores-tab.active {
    background: var(--oc-surface);
    color: var(--oc-cta-hover);
    box-shadow: var(--oc-shadow-xs);
}

.oc-cores-sub-section-label {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--oc-text-muted);
    text-transform: uppercase;
    margin: 0 0 10px 2px;
}

.oc-cores-sub-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    .oc-cores-sub-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

.oc-cor-sub-btn {
    padding: 9px 6px;
    background: var(--oc-surface);
    border: 1.5px solid var(--oc-border);
    border-radius: var(--oc-radius-pill);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--oc-text-2);
    text-transform: uppercase;
    transition: all var(--oc-dur) var(--oc-ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.oc-cor-sub-btn:hover {
    border-color: var(--oc-cta);
    color: var(--oc-cta-hover);
    background: var(--oc-cta-soft);
}

.oc-cor-sub-btn.active {
    background: var(--oc-cta);
    border-color: var(--oc-cta);
    color: #fff;
    box-shadow: 0 3px 10px rgba(247, 148, 29, 0.30);
}

.oc-cores-palette-host {
    background: var(--oc-surface-2);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    padding: 12px 14px;
    min-height: 100px;
    position: relative;
    overflow: visible;
    isolation: isolate;
    width: 100%;
    box-sizing: border-box;
}

/* ─── The bundle's #color-pallet portal inside our modal ───
   Bundle inline: position:absolute; top:-250px on mobile — must neutralize. */

#color-pallet.oc-pallet-in-modal {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    transform: none !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    overflow: visible !important;
}

/*
 * React portals palette UI into <body>#color-pallet. Our sheet/modal moves this
 * node and adds .oc-pallet-in-modal. Whenever it sits on the body without that
 * class, it MUST stay hidden — otherwise a second “Camisa” picker floats over the
 * canvas (any route / before or after edit mode).
 */
#color-pallet:not(.oc-pallet-in-modal) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

/* Every portal slice (Cor 1, Cor 2, …) is a direct child <div>.
   Do NOT set min-height:0 — it can collapse flex rows and hide swatches. */
#color-pallet.oc-pallet-in-modal > div {
    position: relative !important;
    flex-flow: row wrap !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    gap: 7px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Hide the bundle's auto-title span ("Camisa\n   Cor Predominante") —
   we already show our own active sub-button label and modal title. */
#color-pallet.oc-pallet-in-modal > div > span.MuiTypography-root,
#color-pallet.oc-pallet-in-modal > div > .MuiListItemText-root {
    display: none !important;
}

/* Each color rect (bundle: 15×30) → make it a nice rounded square */
#color-pallet.oc-pallet-in-modal > div > div {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: var(--oc-shadow-xs) !important;
    transition: transform 160ms var(--oc-ease), box-shadow 160ms var(--oc-ease) !important;
    flex: 0 0 auto !important;
}

#color-pallet.oc-pallet-in-modal > div > div:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important;
    border-color: rgba(0,0,0,0.20) !important;
    z-index: 2;
}

/* Compact swatches on mobile — fit more colors per row in the bottom
   sheet without horizontal scrolling. */
@media (max-width: 768px) {
    #color-pallet.oc-pallet-in-modal > div {
        gap: 3px !important;
    }
    #color-pallet.oc-pallet-in-modal > div > div {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        border-width: 1px !important;
    }
    #color-pallet.oc-pallet-in-modal > div > div:hover {
        transform: scale(1.12) !important;
    }
}


/* ═══════════════════════════════════════════
   9. PROJECTED NATIVE PANELS (sliders, uploads, golas)
   Restyle MUI controls inside the modal to look Icone.
   ═══════════════════════════════════════════ */

.oc-modal-projected,
.oc-modal-projected-row {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.oc-modal-projected .MuiCollapse-wrapperInner,
.oc-modal-projected > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner {
    padding: 0 !important;
    background: transparent !important;
}

/* Buttons inside projected (Golas: Redonda/V/Polo, file upload buttons) */
.oc-modal-projected .MuiButton-root,
.oc-modal-projected-row .MuiButton-root {
    background: var(--oc-surface) !important;
    color: var(--oc-text) !important;
    border: 1.5px solid var(--oc-border-2) !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
    min-height: 40px !important;
    transition: all 200ms var(--oc-ease) !important;
}
.oc-modal-projected .MuiButton-contained,
.oc-modal-projected-row .MuiButton-contained {
    background: var(--oc-cta) !important;
    color: #fff !important;
    border-color: var(--oc-cta) !important;
}
.oc-modal-projected .MuiButton-root:hover,
.oc-modal-projected-row .MuiButton-root:hover {
    border-color: var(--oc-cta) !important;
    color: var(--oc-cta-hover) !important;
    background: var(--oc-cta-soft) !important;
    transform: translateY(-1px) !important;
}
.oc-modal-projected .MuiButton-contained:hover,
.oc-modal-projected-row .MuiButton-contained:hover {
    background: var(--oc-cta-hover) !important;
    color: #fff !important;
}

/* Sub-list buttons (Redonda/V/Polo, Peito/Frente/Costas) */
.oc-modal-projected .MuiListItemButton-root,
.oc-modal-projected-row .MuiListItemButton-root {
    background: var(--oc-surface) !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: 10px !important;
    margin: 0 0 8px 0 !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
    transition: all 200ms var(--oc-ease) !important;
}

.oc-modal-projected .MuiListItemButton-root:hover,
.oc-modal-projected-row .MuiListItemButton-root:hover {
    border-color: var(--oc-cta) !important;
    background: var(--oc-cta-soft) !important;
}

.oc-modal-projected .MuiListItemText-primary,
.oc-modal-projected-row .MuiListItemText-primary {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    color: var(--oc-text) !important;
    text-transform: uppercase !important;
}

.oc-modal-projected .MuiListItemIcon-root,
.oc-modal-projected-row .MuiListItemIcon-root {
    color: var(--oc-cta) !important;
    min-width: 36px !important;
}
.oc-modal-projected .MuiListItemIcon-root svg,
.oc-modal-projected-row .MuiListItemIcon-root svg {
    width: 22px !important;
    height: 22px !important;
}

/* Inputs */
.oc-modal-projected .MuiInputBase-root,
.oc-modal-projected .MuiOutlinedInput-root,
.oc-modal-projected-row .MuiInputBase-root {
    background: var(--oc-surface) !important;
    color: var(--oc-text) !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}
.oc-modal-projected .MuiOutlinedInput-notchedOutline {
    border-color: var(--oc-border) !important;
}
.oc-modal-projected .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.oc-modal-projected .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--oc-cta) !important;
    border-width: 1.5px !important;
}
.oc-modal-projected .MuiInputLabel-root {
    color: var(--oc-text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.oc-modal-projected .MuiInputLabel-root.Mui-focused {
    color: var(--oc-cta-hover) !important;
}

/* Sliders */
.oc-modal-projected .MuiSlider-root {
    color: var(--oc-cta) !important;
    margin: 14px 16px 18px !important;
    height: 4px !important;
}
.oc-modal-projected .MuiSlider-thumb {
    background: #fff !important;
    border: 3px solid var(--oc-cta) !important;
    width: 18px !important;
    height: 18px !important;
    box-shadow: 0 0 0 6px rgba(247, 148, 29, 0.10), 0 2px 6px rgba(0,0,0,0.12) !important;
}
.oc-modal-projected .MuiSlider-rail {
    background: var(--oc-border) !important;
    opacity: 1 !important;
    height: 4px !important;
}
.oc-modal-projected .MuiSlider-track {
    background: linear-gradient(90deg, var(--oc-cta), var(--oc-cta-hover)) !important;
    border: none !important;
    height: 4px !important;
}
.oc-modal-projected .MuiSlider-markLabel {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--oc-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* Checkbox / Radio / Switch */
.oc-modal-projected .MuiCheckbox-root.Mui-checked,
.oc-modal-projected .MuiRadio-root.Mui-checked {
    color: var(--oc-cta) !important;
}
.oc-modal-projected .MuiFormControlLabel-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--oc-text-2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* File inputs */
.oc-modal-projected input[type="file"],
.oc-modal-projected-row input[type="file"] {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: var(--oc-text-2) !important;
}

/* Hide MuiCollapse chevron icons within projection (we already opened) */
.oc-modal-projected svg[data-testid="ExpandMoreIcon"],
.oc-modal-projected svg[data-testid="ExpandLessIcon"],
.oc-modal-projected-row svg[data-testid="ExpandMoreIcon"],
.oc-modal-projected-row svg[data-testid="ExpandLessIcon"] {
    display: none !important;
}


/* ═══════════════════════════════════════════
   9b. TOAST
   ═══════════════════════════════════════════ */

.oc-toast {
    position: fixed;
    bottom: calc(var(--oc-footer-h) + 80px);
    left: 50%;
    z-index: 99000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 14px;
    background: var(--oc-text);
    color: #fff;
    border-radius: var(--oc-radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    box-shadow: var(--oc-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.96);
    transition: opacity 280ms var(--oc-ease), transform 280ms var(--oc-ease);
    pointer-events: none;
    white-space: nowrap;
}

.oc-toast.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.oc-toast-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--oc-cta);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 2px 4px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}


/* ═══════════════════════════════════════════
   10. FOOTER + ZOOM + ACTION BAR
   ═══════════════════════════════════════════ */

#oc-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--oc-footer-h);
    z-index: 900;
    background: var(--oc-surface);
    border-top: 1px solid var(--oc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    color: var(--oc-text-muted);
    letter-spacing: 0.5px;
    user-select: none;
}

#oc-footer .footer-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--oc-text-soft);
}

#oc-zoom-controls {
    position: fixed;
    bottom: calc(var(--oc-footer-h) + 18px);
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    color: var(--oc-text-2);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--oc-shadow-sm);
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-zoom-btn:hover {
    border-color: var(--oc-cta);
    color: var(--oc-cta-hover);
    transform: translateY(-1px);
}
.oc-zoom-btn:active { transform: scale(0.95); }

#oc-action-bar {
    position: fixed;
    bottom: calc(var(--oc-footer-h) + 18px);
    left: calc(var(--oc-sidebar-w) + 30px);
    z-index: 1000;
    display: flex;
    gap: 10px;
}

/* Mobile floating "Personalizar" pill — opens the sidebar drawer */
#oc-personalizar-btn {
    position: fixed;
    bottom: calc(var(--oc-footer-h) + 14px);
    right: 14px;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: var(--oc-radius-pill);
    background: #fff;
    color: var(--oc-text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--oc-border);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    transition: all var(--oc-dur) var(--oc-ease);
}
#oc-personalizar-btn:hover,
#oc-personalizar-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.24);
}
#oc-personalizar-btn svg {
    color: var(--oc-cta);
    flex: 0 0 auto;
}

/* Mobile-only single round thumbnail (current model) — opens picker. */
#oc-model-thumb {
    position: fixed;
    bottom: calc(var(--oc-footer-h) + 14px);
    left: 14px;
    z-index: 1000;
    display: none;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--oc-cta);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: 0 6px 18px rgba(247, 148, 29, 0.35);
}
#oc-model-thumb:hover,
#oc-model-thumb:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(247, 148, 29, 0.45);
}
#oc-model-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ─── EDIT MODE — top tab bar + per-tab footer ─── */

#oc-edit-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--oc-header-h);
    z-index: 1101;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: #fff;
    border-bottom: 1px solid var(--oc-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.oc-edit-back {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    color: var(--oc-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--oc-radius-sm);
    transition: background var(--oc-dur) var(--oc-ease);
}
.oc-edit-back:hover { background: var(--oc-bg); }

.oc-edit-tabs {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.oc-edit-tabs::-webkit-scrollbar { display: none; }

.oc-edit-tab {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 0 14px;
    height: 100%;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--oc-text-muted);
    cursor: pointer;
    position: relative;
    transition: color var(--oc-dur) var(--oc-ease);
}
.oc-edit-tab.active {
    color: var(--oc-text);
}
.oc-edit-tab.active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px;
    bottom: 0;
    height: 3px;
    background: var(--oc-cta);
    border-radius: 2px 2px 0 0;
}

#oc-edit-footer {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 1100;
    display: none;
    padding: 14px 16px calc(var(--oc-footer-h) + 14px);
    background: #fff;
    border-top: 1px solid var(--oc-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    max-height: 55vh;
    overflow-y: auto;
}

/* Cores tab — 3 part cards in a row */
.oc-edit-parts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}
.oc-edit-part-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--oc-border);
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-edit-part-card:active,
.oc-edit-part-card:hover {
    transform: translateY(-1px);
    border-color: var(--oc-cta);
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.18);
}
.oc-edit-part-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--oc-text);
    letter-spacing: 0.3px;
}
.oc-edit-part-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-bg);
    border: 1px solid var(--oc-border);
    min-height: 22px;
}
.oc-edit-pill-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #ccc;
    display: inline-block;
}

/* Legacy fallback (still used if a tab can't load its inline UI) */
.oc-edit-tab-hint {
    display: flex;
    width: 100%;
}
.oc-edit-open-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-cta);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: 0 6px 18px rgba(247, 148, 29, 0.32);
}
.oc-edit-open-btn:hover,
.oc-edit-open-btn:active {
    background: var(--oc-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(247, 148, 29, 0.42);
}

/* ─── Inline tab UI blocks (Escudo / Mangas / Logos) ────────────── */

.oc-edit-block {
    width: 100%;
    margin-bottom: 14px;
}
.oc-edit-block:last-child { margin-bottom: 0; }

.oc-edit-block-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--oc-text-muted);
    margin-bottom: 8px;
    padding-left: 2px;
}

.oc-edit-block-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    align-items: center;
}

/* When #color-pallet is projected inside a block-row, override the
   bundle's grid so swatches lay out horizontally like the reference. */
.oc-edit-block-row #color-pallet.oc-pallet-in-modal {
    width: 100%;
}
.oc-edit-block-row #color-pallet.oc-pallet-in-modal > div {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    justify-content: flex-start;
}

/* "Adicionar seu escudo" / similar CTA */
.oc-edit-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--oc-radius-pill);
    background: #e9eef4;
    color: var(--oc-text);
    border: 1.5px dashed #c2cad6;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-edit-upload-btn:hover,
.oc-edit-upload-btn:active {
    background: #dde4ee;
    border-color: var(--oc-cta);
    color: var(--oc-cta);
    transform: translateY(-1px);
}

/* Mangas e Gola — selectable type cards */
.oc-edit-golas-row {
    display: flex;
    gap: 10px;
    width: 100%;
}
.oc-edit-gola-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    background: #f4f6fa;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
    font-family: inherit;
}
.oc-edit-gola-card:hover,
.oc-edit-gola-card:active {
    background: #fff;
    border-color: var(--oc-cta);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.oc-edit-gola-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--oc-text);
}
.oc-edit-gola-icon svg {
    width: 32px;
    height: auto;
    max-height: 32px;
}
.oc-edit-gola-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--oc-text);
    text-align: center;
}

/* Subtle disclaimer line when one or more gola variants couldn't be
   loaded (chunks missing from the deploy). Sits across the full row. */
.oc-gola-broken-hint {
    flex: 1 1 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: center;
}

/* Logos — 6 small position cards */
.oc-edit-logos-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}
.oc-edit-logo-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.oc-edit-logo-scale {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.oc-edit-logo-scale-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
}
.oc-edit-logo-scale-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--oc-text-soft, #64748b);
}
.oc-logo-scale-val {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--oc-cta);
}
.oc-logo-scale-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    accent-color: var(--oc-cta);
    cursor: pointer;
    margin: 0;
}
.oc-logo-scale-range:focus {
    outline: none;
}
.oc-logo-scale-range:focus-visible {
    outline: 2px solid var(--oc-cta);
    outline-offset: 2px;
}
.oc-edit-logo-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 12px;
    background: #f4f6fa;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
    font-family: inherit;
    min-width: 0;
}
.oc-edit-logo-card:hover,
.oc-edit-logo-card:active {
    background: #fff;
    border-color: var(--oc-cta);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.oc-edit-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--oc-cta);
    flex-shrink: 0;
}
.oc-edit-logo-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--oc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

@media (max-width: 380px) {
    .oc-edit-logos-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Color picker bottom sheet (slides up over the edit footer) */
#oc-color-sheet {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 9200;
    background: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.22);
    transform: translateY(110%);
    transition: transform 0.28s var(--oc-ease);
    will-change: transform;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
#oc-color-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
}
.oc-color-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 8px;
    border-bottom: 1px solid var(--oc-border);
}
.oc-color-sheet-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--oc-text);
}
.oc-color-sheet-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--oc-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--oc-dur) var(--oc-ease);
}
.oc-color-sheet-close:hover { background: var(--oc-bg); }

.oc-color-sheet-body {
    padding: 12px 18px 24px;
    overflow-y: auto;
}

.oc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--oc-radius-pill);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: all var(--oc-dur) var(--oc-ease);
}

.oc-action-btn.primary {
    background: var(--oc-cta);
    color: #fff;
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.32);
}
.oc-action-btn.primary:hover {
    background: var(--oc-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.42);
}

.oc-action-btn.ghost {
    background: var(--oc-surface);
    color: var(--oc-text);
    border: 1px solid var(--oc-border);
}
.oc-action-btn.ghost:hover {
    border-color: var(--oc-cta);
    color: var(--oc-cta-hover);
}


/* ═══════════════════════════════════════════
   11. VITRINE
   ═══════════════════════════════════════════ */

#oc-vitrine {
    position: fixed;
    inset: 0;
    background: var(--oc-bg);
    z-index: 5000;
    overflow-y: auto;
    padding: 60px 5%;
    box-sizing: border-box;
}
#oc-vitrine.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--oc-ease);
}

.oc-vitrine-header {
    text-align: center;
    margin-bottom: 36px;
}
.oc-vitrine-header img {
    height: 70px;
    width: auto;
    margin-bottom: 16px;
    filter: drop-shadow(0 6px 18px rgba(220, 38, 38, 0.15));
}
.oc-vitrine-header h1 {
    display: block !important;
    font-size: 26px;
    font-weight: 500;
    margin: 0;
    color: var(--oc-text) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
}
.oc-vitrine-header p {
    font-size: 13px;
    color: var(--oc-text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.oc-vitrine-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}
.oc-filter-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.oc-filter-label {
    font-size: 11px;
    color: var(--oc-text-muted);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.oc-filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.oc-filter-btn {
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    color: var(--oc-text-2);
    padding: 9px 22px;
    border-radius: var(--oc-radius-pill);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-filter-btn:hover {
    border-color: var(--oc-cta);
    color: var(--oc-cta-hover);
}
.oc-filter-btn.active {
    background: var(--oc-cta);
    border-color: var(--oc-cta);
    color: #fff;
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.28);
}

.oc-vitrine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.oc-vitrine-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: var(--oc-text-muted);
    font-size: 14px;
    background: var(--oc-surface);
    border-radius: var(--oc-radius);
    border: 1px dashed var(--oc-border);
}

.oc-vitrine-card {
    background: var(--oc-surface);
    border-radius: var(--oc-radius);
    border: 1px solid var(--oc-border);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
    box-shadow: var(--oc-shadow-xs);
    animation: oc-fade-up 320ms var(--oc-ease) backwards;
}
.oc-vitrine-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--oc-shadow);
    border-color: var(--oc-cta);
}

.oc-vitrine-card-img {
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--oc-surface-2);
    border-bottom: 1px solid var(--oc-border);
    transition: transform 0.5s var(--oc-ease);
}
.oc-vitrine-card:hover .oc-vitrine-card-img {
    transform: scale(1.05);
}
.oc-side-logos {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 55%;
    padding: 12px 14px;
}
.oc-vitrine-card-content {
    padding: 18px;
    text-align: center;
}
.oc-vitrine-card-content h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--oc-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.oc-vitrine-card-content p {
    margin: 0 0 14px 0;
    font-size: 11px;
    color: var(--oc-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.oc-vitrine-card-btn {
    width: 100%;
    padding: 9px;
    border: 1px solid var(--oc-cta);
    background: transparent;
    color: var(--oc-cta-hover);
    border-radius: var(--oc-radius-pill);
    font-family: inherit;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all var(--oc-dur) var(--oc-ease);
}
.oc-vitrine-card:hover .oc-vitrine-card-btn {
    background: var(--oc-cta);
    color: #fff;
}


/* ═══════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    :root {
        --oc-header-h: 56px;
        --oc-sidebar-w: 260px;
    }
    #oc-header { padding: 0 18px; }
    .oc-header-breadcrumb { font-size: 10px; }
}

@media (max-width: 768px) {
    :root {
        --oc-header-h: 56px;
        --oc-sidebar-w: 0px;
    }

    /* Mobile = immersive fullscreen canvas. The 3D scene fills every
       pixel from below the header all the way to the bottom edge.
       Floating chrome (thumb, personalizar pill, zoom) sits ON TOP of
       the canvas with shadows for elevation. The copyright footer is
       hidden — every pixel goes to the model. */
    html, body {
        height: 100vh;
        overflow: hidden;
    }
    #root, .App {
        height: 100vh !important;
        min-height: 0 !important;
        max-height: 100vh !important;
    }

    /* Match the WebGL column gradient on #root only while the simulator
       canvas is mounted (splash/vitrine keep --oc-bg). */
    #root:has(canvas[data-engine*="three.js"]),
    #root:has(canvas[data-engine*="three.js"]) .App {
        background:
            radial-gradient(circle, #fff 0%, #fff 20%, #ebebeb 35%, #bebebe 100%) !important;
    }

    /* The canvas column wrapper is inline from React. Browsers often
       serialise `calc(100vh - 200px)` as `calc(-200px + 100vh)` — if we only
       match one form, the rule never applies and the column stays short
       (~2/3 viewport) with a white band + “divider” below.

       Taller column → larger R3F sizing; a modest negative margin recenters
       the model — too much (-50px) pulled the top into the header crop. */
    #root div[style*="calc(100vh - 200px)"],
    #root div[style*="calc(-200px + 100vh)"] {
        height: calc(160vh - 260px) !important;
        max-height: none !important;
    }

    #root canvas[data-engine*="three.js"] {
        margin-top: -28px !important;
        transform: none !important;
    }

    /* Hide the copyright strip on mobile — reclaim that strip for the canvas. */
    #oc-footer {
        display: none !important;
    }

    #oc-header { padding: 0 14px; }
    .oc-header-breadcrumb { display: none; }
    .oc-header-logo { height: 30px; }
    .oc-hamburger { display: inline-flex; }

    #oc-sidebar {
        width: 320px;
        left: -340px;
        transition: left 0.3s var(--oc-ease);
        box-shadow: var(--oc-shadow-lg);
    }
    #oc-sidebar.oc-mobile-open {
        left: 0;
    }
    .oc-mobile-close { display: flex; }

    /* Overlay + vignette also span the full canvas area now */
    #oc-canvas-overlay, #oc-vignette {
        left: 0;
        bottom: 0;
    }

    /* On mobile: replace BAIXAR + ORÇAMENTO bar with the PERSONALIZAR
       pill (bottom-right) and a single round model thumb (bottom-left).
       Zoom controls stack vertically just above the PERSONALIZAR pill.
       All sit FLOATING over the canvas — no white footer behind them. */
    #oc-action-bar {
        display: none !important;
    }
    #oc-personalizar-btn {
        display: inline-flex;
        bottom: 16px;
    }
    #oc-model-thumb {
        display: inline-flex;
        bottom: 16px;
    }

    #oc-zoom-controls {
        bottom: 80px;
        right: 14px;
        left: auto;
        flex-direction: column;
        gap: 6px;
    }
    .oc-zoom-btn {
        width: 36px; height: 36px;
        font-size: 13px;
    }

    /* When edit mode is active, the regular chrome is hidden and the
       editor header/footer take over. Zoom controls stay visible so the
       user can frame the model while editing. */
    body.oc-edit-mode #oc-header,
    body.oc-edit-mode #oc-footer,
    body.oc-edit-mode #oc-model-thumb,
    body.oc-edit-mode #oc-personalizar-btn {
        display: none !important;
    }
    body.oc-edit-mode #oc-zoom-controls {
        bottom: calc(var(--oc-edit-footer-h, 200px) + 14px);
    }
    body.oc-edit-mode #oc-edit-header {
        display: flex;
    }
    body.oc-edit-mode #oc-edit-footer {
        display: block;
    }
    /* In edit mode the canvas spans top-edit-header to bottom-edit-footer.
       Allowance: header 56 + footer height (driven by --oc-edit-footer-h
       which JS updates whenever the active tab content changes). */
    body.oc-edit-mode #root,
    body.oc-edit-mode .App {
        height: calc(170vh - 56px - var(--oc-edit-footer-h, 100px)) !important;
        max-height: calc(170vh - 56px - var(--oc-edit-footer-h, 100px)) !important;
    }
    body.oc-edit-mode #root canvas {
        transform: translateY(20px) !important;
    }
    body.oc-edit-mode #oc-canvas-overlay,
    body.oc-edit-mode #oc-vignette {
        top: var(--oc-header-h);
        bottom: var(--oc-edit-footer-h, 200px);
    }
    /* Edit footer also drops the lower padding since the page footer is
       hidden in edit mode — content sits closer to the screen edge. */
    body.oc-edit-mode #oc-edit-footer {
        padding-bottom: 18px;
    }

    /* Modal becomes bottom sheet for small variants */
    #oc-modal-root {
        padding: 0;
        align-items: flex-end;
    }
    .oc-modal-variant-small {
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 80vh;
    }
    .oc-modal-variant-large {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .oc-vitrine-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .oc-vitrine-card-img { height: 140px; }
    .oc-vitrine-card-content { padding: 12px; }
    .oc-vitrine-card-content h3 { font-size: 12px; }

    .oc-modelos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}


/* ═══════════════════════════════════════════
   13. PRINT
   ═══════════════════════════════════════════ */

@media print {
    #oc-header, #oc-footer, #oc-sidebar, #oc-modal-root,
    #oc-action-bar, #oc-zoom-controls, #oc-splash,
    #oc-canvas-overlay, #oc-vignette {
        display: none !important;
    }
}