/* Voomplex 2026 visual Studio redesign. All rules are scoped to the Studio route. */
body.vx-studio-route{background:#f2f4f2}
body.vx-studio-route>.nav,body.vx-studio-route>.footer{display:none}
body.vx-studio-route #app{min-height:100vh}
.vx-studio-shell.vx-studio-full{width:100%;max-width:none;margin:0;padding:0}
.vx-studio-shell.vx-studio-full>.vx-studio-heading{display:none}
.vx-studio-shell.vx-studio-full #vxStudioMount{width:100%;min-width:0}
.vx-studio-shell.vx-studio-full .vx-studio-topbar{
 display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(300px,1fr);gap:18px;
 align-items:center;background:#fff;color:#151a15;padding:11px 22px;
 min-height:74px;border-bottom:1px solid #e5e8e2;position:relative;z-index:40;
}
.vx-studio-toolbar-brand{display:flex;align-items:center;gap:14px;min-width:0}
.vx-studio-toolbar-brand img{display:block;width:130px;max-height:37px;object-fit:contain;object-position:left}
.vx-studio-crumb{font-size:12px!important;color:#818982!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-studio-crumb b{color:#262d26;font-size:12px}
.vx-studio-device-toggle{display:flex;background:#f2f5f0;border:1px solid #e6eae4;border-radius:10px;padding:4px;gap:2px}
.vx-studio-device-toggle button{font:inherit;font-size:12px;color:#717a70;border:0;padding:10px 13px;border-radius:7px;background:transparent;font-weight:650;white-space:nowrap;cursor:pointer}
.vx-studio-device-toggle button.active{background:#e1f7bb;color:#31560e;font-weight:800}
.vx-studio-actions{display:flex;justify-content:flex-end;align-items:center;gap:7px;flex-wrap:nowrap}
.vx-studio-actions button{border-radius:8px;white-space:nowrap;min-width:0;border:1px solid #dce3d8;font-size:12px;padding:10px 12px;color:#222e20;background:#fff}
.vx-studio-actions button:hover{background:#f0f5e8}
.vx-studio-actions #vxOpenSubmit{background:#d7ff45!important;border-color:#d7ff45!important;color:#1f310e!important;font-size:12px;white-space:nowrap;padding:12px 17px;border-radius:8px}
.vx-studio-shell.vx-studio-full .vx-studio-grid{
 display:grid;grid-template-columns:minmax(445px,505px) minmax(0,1fr);
 border:0;min-height:calc(100vh - 74px);background:#eef1ed;align-items:stretch
}
.vx-studio-shell.vx-studio-full .vx-studio-controls{
 display:grid;grid-template-columns:156px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
 padding:0;max-height:calc(100vh - 74px);overflow:hidden;background:#fff;
 border-right:1px solid #e5e8e1;min-height:690px
}
.vx-studio-shell.vx-studio-full .vx-studio-tabs{
 grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;
 border-right:1px solid #ebede7;padding:20px 10px;background:#fbfcfa;
 margin:0;gap:5px;overflow-y:auto;min-width:0;
}
.vx-studio-tabs-caption{font-weight:850;letter-spacing:.13em;color:#a4ac9f;font-size:9px;margin:9px 10px 14px}
.vx-studio-shell.vx-studio-full .vx-studio-tabs button{
 display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;
 justify-content:start;align-items:center;text-align:left;border-radius:10px;
 padding:14px 10px;background:transparent;border:1px solid transparent;
 color:#344034;line-height:1.25;cursor:pointer;transition:background .15s;
}
.vx-studio-shell.vx-studio-full .vx-studio-tabs button:hover{background:#eef3ea}
.vx-studio-shell.vx-studio-full .vx-studio-tabs button.active{background:#151b16;color:#fff;border-color:#151b16}
.vx-studio-tabs button>span{grid-row:span 2;font-size:20px;display:grid;place-items:center;color:#9cb18c}
.vx-studio-tabs button.active>span{color:#d7ff45}
.vx-studio-tabs button>b{font-size:12px;font-weight:800;min-width:0;white-space:normal}
.vx-studio-tabs button>small{font-size:10px;color:#919d8e;margin-top:4px;white-space:normal}
.vx-studio-tabs button.active>small{color:#bacaba}
.vx-studio-sidebar-help{margin-top:auto;background:#f1f4ef;padding:14px 10px;border-radius:10px;font-size:12px;font-weight:800;color:#263525}
.vx-studio-sidebar-help small{display:block;color:#687565;font-size:10px;line-height:1.5;font-weight:450;margin:8px 0}
.vx-studio-sidebar-help a{font-size:10px;color:#397122;text-decoration:underline}
.vx-studio-shell.vx-studio-full .vx-studio-tab-pane{
 display:block;grid-row:1;grid-column:2;max-height:calc(100vh - 74px);
 min-height:690px;padding:28px 20px 34px;overflow-y:auto;overflow-x:hidden;
 overscroll-behavior:contain;background:#fff;min-width:0
}
.vx-studio-shell.vx-studio-full .vx-studio-tab-pane[hidden]{display:none!important}
.vx-studio-pane-title{margin:0 0 20px;display:grid;gap:7px}
.vx-studio-pane-title>span{font-size:10px;letter-spacing:.15em;font-weight:850;color:#729b56}
.vx-studio-pane-title h2{font-size:25px;line-height:1.05;letter-spacing:-.05em;font-weight:850;color:#172018;margin:4px 0}
.vx-studio-pane-title p{font-size:12px;color:#68756a;line-height:1.65;margin:0}
.vx-studio-pane-title.small{margin-top:26px;margin-bottom:14px}
.vx-studio-pane-title.small h3{font-size:17px;letter-spacing:-.035em;margin:0}
.vx-studio-kit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 18px}
.vx-studio-kit-grid button.vx-studio-kit{
 min-width:0;display:block;padding:4px 4px 11px;border-radius:10px;text-align:left;
 background:#fff;border:1px solid #e1e7de;position:relative;cursor:pointer;transition:.15s;
}
.vx-studio-kit-grid button.vx-studio-kit:hover{border-color:#9ccf5f;transform:translateY(-2px);box-shadow:0 7px 18px #172b1010}
.vx-studio-kit-grid button.vx-studio-kit.selected{border:2px solid #79b935}
.vx-studio-kit-meta{padding:8px 5px 0;display:grid;gap:4px}
.vx-studio-kit-meta b{font-size:12px;font-weight:850;color:#1d281e}
.vx-studio-kit-meta small{color:#7a857b;font-size:10px}
.vx-studio-kit-preview{height:107px;display:grid;grid-template-rows:20px 1fr 24px;border-radius:6px;overflow:hidden;position:relative;color:var(--kit-ink);background:var(--kit-bg)}
.vx-kit-top{display:flex;align-items:center;justify-content:space-between;padding:4px 9px;background:var(--kit-bg)}
.vx-kit-top i:first-child{display:block;width:30px;height:5px;background:var(--kit-ink);border-radius:3px}
.vx-kit-top i:last-child{display:block;width:42px;height:3px;background:var(--kit-ink);opacity:.25}
.vx-kit-hero{display:grid;grid-template-columns:1fr 47%;min-width:0}
.vx-kit-hero>span{padding:10px 4px 2px 9px;display:grid;align-content:center;justify-items:start;gap:4px}
.vx-kit-hero>span i{background:var(--kit-accent);width:24px;height:3px}
.vx-kit-hero>span b{display:block;background:var(--kit-ink);width:91%;height:6px}
.vx-kit-hero>span b:nth-of-type(2){width:64%}
.vx-kit-hero>span small{display:block;background:var(--kit-accent);width:40px;height:9px;border-radius:2px;margin-top:3px}
.vx-kit-hero>em{background-image:linear-gradient(90deg,transparent,#0000),var(--kit-photo);background-position:center;background-size:cover}
.vx-kit-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px 9px;background:var(--kit-bg)}
.vx-kit-columns i{background:var(--kit-ink);opacity:.09;border-radius:2px}
.vx-kit-selected{position:absolute;top:10px;right:10px;background:#d7ff45;color:#1d3214;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:13px}
.vx-studio-kit-note{font-size:11px;line-height:1.6;color:#6b7669;background:#f5f7f3;padding:12px;border-left:3px solid #a8dc6c}
.vx-studio-palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.vx-studio-palette-grid button{display:grid;min-width:0;gap:6px;border:1px solid #e0e5dd;background:#fff;border-radius:8px;padding:7px 3px;font-size:10px;cursor:pointer}
.vx-studio-palette-grid button>span{display:flex;justify-content:center;gap:0}
.vx-studio-palette-grid i{display:block;width:14px;height:17px;border:1px solid #ddd;border-radius:50%;margin-left:-3px}
.vx-studio-palette-grid small{text-transform:capitalize}
.vx-studio-shell.vx-studio-full .vx-control-label{margin:17px 0 10px;line-height:1.5;color:#263627;font-size:12px;gap:8px}
.vx-studio-shell.vx-studio-full .vx-studio-tab-pane :is(input:not([type=color]):not([type=range]),textarea,select){
 padding:13px 12px;border:1px solid #d5ded0;border-radius:8px;background:#fff;min-width:0;
 font-size:13px;line-height:1.4;color:#182219;outline:none;position:relative;z-index:1
}
.vx-studio-shell.vx-studio-full .vx-studio-tab-pane :is(input,textarea,select):focus-visible{
 border-color:#87b83f;outline:2px solid #a8d564;outline-offset:1px
}
.vx-studio-shell.vx-studio-full .vx-studio-tab-pane textarea{min-height:105px;resize:vertical}
.vx-studio-shell.vx-studio-full .vx-studio-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.vx-studio-shell.vx-studio-full .vx-studio-inline button{border-radius:7px;font-size:11px;min-width:0;white-space:normal}
.vx-studio-shell.vx-studio-full .vx-studio-secondary{background:#d7ff45;color:#233518;border-color:#d7ff45;font-weight:850;border-radius:7px}
.vx-studio-shell.vx-studio-full .vx-section-choice{border-radius:8px;margin:7px 0;padding:14px 12px}
.vx-studio-shell.vx-studio-full .vx-section-choice.selected{border:1px solid #98d152;background:#eff8e4}
.vx-studio-shell.vx-studio-full .vx-template-grid button{border-radius:8px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap{background:#eef0ed;padding:27px 35px 45px;min-width:0;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 74px);min-height:690px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-head{align-items:center;letter-spacing:.07em;color:#6c7969}
.vx-studio-online{display:inline-block;background:#91c94a;width:7px;height:7px;border-radius:50%;margin-right:6px}
.vx-studio-shell.vx-studio-full #vxPreview{width:100%;min-width:0;max-width:100%;margin:0 auto;box-shadow:0 18px 70px #1620181a;transition:max-width .3s}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.tablet #vxPreview{max-width:820px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile #vxPreview{max-width:390px}
.vx-studio-shell.vx-studio-full .vx-site-preview{box-shadow:none;border-radius:8px;overflow:hidden;min-width:0}
.vx-studio-shell.vx-studio-full .vx-preview-nav{padding:22px 6%;border-bottom:1px solid color-mix(in srgb,var(--vx-ink) 9%,transparent);opacity:1;min-height:86px;gap:20px}
.vx-studio-shell.vx-studio-full .vx-preview-brand{min-width:0;display:grid;gap:5px}
.vx-studio-shell.vx-studio-full .vx-preview-brand b{font-size:clamp(15px,1.6vw,24px);letter-spacing:-.05em}
.vx-studio-shell.vx-studio-full .vx-preview-brand small{font-size:10px;color:inherit;opacity:.65}
.vx-studio-shell.vx-studio-full .vx-preview-nav>span{color:inherit;opacity:.7;font-size:11px;white-space:normal}
.vx-studio-shell.vx-studio-full .vx-preview-block,
.vx-studio-shell.vx-studio-full .vx-preview-block.kind-hero{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
 min-width:0;min-height:0;padding:72px 7%;overflow:visible;position:relative
}
.vx-studio-shell.vx-studio-full .vx-preview-block.kind-hero{padding:100px 7%;min-height:420px}
.vx-studio-shell.vx-studio-full .vx-preview-copy{flex:1 1 320px;min-width:min(100%,270px);max-width:680px;width:auto;position:relative}
.vx-studio-shell.vx-studio-full .vx-preview-copy h2{font-size:clamp(29px,3vw,54px);line-height:1.1;letter-spacing:-.052em;overflow-wrap:break-word;margin:15px 0}
.vx-studio-shell.vx-studio-full .kind-hero .vx-preview-copy h2{font-size:clamp(36px,3.75vw,66px);line-height:1.05}
.vx-studio-shell.vx-studio-full .vx-preview-copy p{font-size:14px;line-height:1.65;max-width:570px}
.vx-studio-shell.vx-studio-full .vx-preview-block>img{flex:0 0 39%;width:39%;height:270px;object-fit:cover;border-radius:var(--vx-rad);min-width:200px;max-width:46%}
.vx-studio-shell.vx-studio-full .kind-hero>img{height:350px}
.vx-studio-shell.vx-studio-full .vx-preview-content-cards{
 display:grid;grid-template-columns:repeat(var(--vx-cols,3),minmax(0,1fr));flex:1 0 100%;
 order:5;width:100%;max-width:none;min-width:0;position:static;z-index:auto;gap:14px;margin:12px 0 0
}
.vx-studio-shell.vx-studio-full .vx-preview-content-card{border-radius:var(--vx-rad);padding:23px 19px;min-width:0}
.vx-studio-shell.vx-studio-full .vx-preview-content-card>b{font-size:15px;line-height:1.35}
.vx-studio-shell.vx-studio-full .vx-preview-content-card p{font-size:12px;line-height:1.65}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-cards{display:flex}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-centered,
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-stacked{flex-direction:column;align-items:stretch;text-align:center}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-centered .vx-preview-copy,
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-stacked .vx-preview-copy{flex:0 1 auto;width:100%;max-width:750px;margin:0 auto}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-centered>img,
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-layout-stacked>img{width:100%;max-width:750px;margin:0 auto;height:285px;flex:none}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-image-left{flex-direction:row-reverse}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-image-left.vx-layout-stacked{flex-direction:column}
.vx-studio-shell.vx-studio-full .vx-preview-block.vx-image-background>img{position:absolute!important;inset:0;width:100%!important;max-width:none;opacity:.16}
.vx-studio-shell.vx-studio-full .vx-site-preview .vx-preview-footer{opacity:1;padding:45px 7%;line-height:1.65}
.vx-studio-shell.vx-studio-full .vx-preview-cta,.vx-studio-shell.vx-studio-full .vx-preview-action{border-radius:var(--vx-rad);min-height:40px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-block,
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.tablet .vx-preview-block{gap:20px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-block{display:flex!important;flex-direction:column;padding:45px 7%!important;align-items:stretch}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-copy{min-width:0;width:100%;flex:0 1 auto}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-block>img{width:100%;max-width:100%;min-width:0;height:170px;flex:none;margin:0}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-content-cards{grid-template-columns:1fr;gap:10px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-copy h2{font-size:29px}
.vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .kind-hero .vx-preview-copy h2{font-size:36px}
.vx-studio-shell.vx-studio-full #vxStudioMount.vx-studio-expanded .vx-studio-grid{grid-template-columns:1fr}
.vx-studio-shell.vx-studio-full #vxStudioMount.vx-studio-expanded .vx-studio-controls{display:none}
.vx-studio-shell.vx-studio-full #vxStudioMount.vx-studio-expanded .vx-studio-preview-wrap{max-height:none}
.vx-studio-shell.vx-studio-full #vxStudioMount.vx-studio-expanded #vxPreview{max-width:1350px}
@media(max-width:1330px){
 .vx-studio-shell.vx-studio-full .vx-studio-grid{grid-template-columns:minmax(390px,445px) minmax(0,1fr)}
 .vx-studio-shell.vx-studio-full .vx-studio-controls{grid-template-columns:130px minmax(0,1fr)}
 .vx-studio-tabs button{padding:12px 7px!important}
 .vx-studio-shell.vx-studio-full .vx-studio-topbar{grid-template-columns:1fr auto;gap:9px}
 .vx-studio-device-toggle{grid-row:2;grid-column:1 / -1;justify-content:center;width:fit-content;margin:auto}
 .vx-studio-shell.vx-studio-full .vx-studio-preview-wrap{padding:20px}
 .vx-studio-shell.vx-studio-full .vx-preview-copy{min-width:min(100%,240px)}
}
@media(max-width:1030px){
 .vx-studio-shell.vx-studio-full .vx-studio-grid{display:block}
 .vx-studio-shell.vx-studio-full .vx-studio-controls{grid-template-columns:160px minmax(0,1fr);min-height:420px;max-height:65vh}
 .vx-studio-shell.vx-studio-full .vx-studio-tab-pane{min-height:420px;max-height:65vh}
 .vx-studio-shell.vx-studio-full .vx-studio-preview-wrap{max-height:none;min-height:0;padding:24px}
 .vx-studio-shell.vx-studio-full .vx-site-preview .vx-preview-copy{min-width:240px}
}
@media(max-width:620px){
 .vx-studio-shell.vx-studio-full .vx-studio-topbar{display:flex;flex-wrap:wrap;padding:12px;gap:10px}
 .vx-studio-toolbar-brand{width:100%;justify-content:space-between}
 .vx-studio-crumb{font-size:11px!important}
 .vx-studio-device-toggle{order:2;margin:0;width:auto;flex:1}
 .vx-studio-device-toggle button{font-size:10px;padding:8px}
 .vx-studio-actions{order:3;justify-content:space-between;flex:1;gap:4px;flex-wrap:wrap}
 .vx-studio-actions button{padding:9px;font-size:11px}
 .vx-studio-actions #vxOpenSubmit{flex:1 0 100%;padding:12px;font-size:11px}
 .vx-studio-shell.vx-studio-full .vx-studio-controls{display:block;max-height:none;min-height:0}
 .vx-studio-shell.vx-studio-full .vx-studio-tabs{display:flex;flex-direction:row;overflow-x:auto;gap:5px;padding:12px;min-height:0;border-right:0;border-bottom:1px solid #ebeee8}
 .vx-studio-tabs-caption,.vx-studio-sidebar-help{display:none}
 .vx-studio-shell.vx-studio-full .vx-studio-tabs button{flex:0 0 auto;grid-template-columns:1fr;justify-items:center;padding:9px 12px!important}
 .vx-studio-tabs button>span{grid-row:1;font-size:16px}
 .vx-studio-tabs button>b{font-size:11px}
 .vx-studio-tabs button>small{display:none}
 .vx-studio-shell.vx-studio-full .vx-studio-tab-pane{max-height:470px;min-height:0;padding:21px 15px}
 .vx-studio-kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vx-studio-shell.vx-studio-full .vx-studio-preview-wrap{padding:14px}
 .vx-studio-shell.vx-studio-full .vx-preview-content-cards{grid-template-columns:1fr 1fr}
 .vx-studio-shell.vx-studio-full .vx-preview-block{display:flex;flex-direction:column;padding:48px 7%!important;align-items:stretch}
 .vx-studio-shell.vx-studio-full .vx-preview-block>img{width:100%;max-width:100%;height:220px;margin:0}
 .vx-studio-shell.vx-studio-full .vx-preview-copy{flex:0 1 auto;min-width:0}
 .vx-studio-shell.vx-studio-full .vx-preview-copy h2{font-size:30px}
 .vx-studio-shell.vx-studio-full .vx-preview-nav{padding:16px 7%}
}
@media(prefers-reduced-motion:reduce){.vx-studio-shell.vx-studio-full *{transition:none!important;animation:none!important}}

/* The Studio has its own help link, so the global floating chat cannot cover the live canvas. */
body.vx-studio-route .vx-chat{display:none}
/* Preserve generous, independent card rows at intermediate canvas widths. */
@media(min-width:621px) and (max-width:1520px){
 .vx-studio-shell.vx-studio-full .vx-preview-content-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vx-studio-shell.vx-studio-full .vx-preview-block:not(.kind-hero) .vx-preview-copy{flex-basis:100%;max-width:750px}
 .vx-studio-shell.vx-studio-full .vx-preview-block:not(.kind-hero)>img{max-width:100%;flex-basis:100%;width:100%;height:220px}
}
@media(max-width:620px){
 .vx-studio-shell.vx-studio-full .vx-studio-preview-wrap.mobile .vx-preview-content-cards{grid-template-columns:1fr}
 .vx-studio-shell.vx-studio-full .vx-preview-content-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}