/* Layout geral */
.svz-wrap{
  display:flex;
  gap:18px;                 /* menor */
  align-items:flex-start;
  flex-wrap:nowrap;

  /* fonte do tema */
  font-family: inherit !important;
  font-size:13px;           /* menor */
  line-height:1.35;
}
.svz-wrap *{ font-family: inherit !important; }
.svz-wrap input,
.svz-wrap select,
.svz-wrap button{ font: inherit; }

.svz-canvas-col{
  position:sticky;          /* canvas fixo */
  top:96px;                 /* ajuste se precisar (altura do header) */
  flex:1 1 720px;
  min-width:420px;
  align-self:flex-start;
}
.svz-canvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  background:#fff;
}

/* Toolbar compacta */
.svz-toolbar{
  display:flex;
  gap:10px;                 /* menor */
  align-items:center;
  margin-top:10px;          /* menor */
  flex-wrap:wrap;
}
.svz-toolbar button{
  padding:8px 12px;         /* menor */
  border-radius:12px;
  border:1px solid #d0d7de;
  background:#fff;
  cursor:pointer;
  font-weight:600;
  font-size:13px;           /* menor */
  height:34px;              /* consistente */
}
.svz-toolbar button:hover{background:#f6f8fa}

/* Sidebar: fica fixa e com scroll para não “sumir” o board */
.svz-side{
  width:360px;              /* um pouco menor */
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;                 /* menor */
  position:sticky;
  top:96px;                 /* igual ao canvas */

  max-height:calc(100vh - 110px); /* scroll interno */
  overflow:auto;
  padding-right:6px;
}

/* Panel + accordion (compacto) */
.svz-panel{
  background:#fff;
  border:1px solid #e6e8eb;
  border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  padding:10px;             /* menor */
}
.svz-panel h4{
  margin:0 0 6px;           /* menor */
  font-size:14px;           /* menor */
  font-weight:800;
}

.svz-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:6px;        /* menor */
}
.svz-row.single{grid-template-columns:1fr}
.svz-row label{
  font-size:11px;           /* menor */
  font-weight:700;
  opacity:.9;
  margin-bottom:4px;
  display:block;
}

/* Select menor */
.svz-qty-select{
  height:34px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid #d0d7de;
  background:#fff;
  font-size:13px;
}

/* Accordion compacto */
.svz-acc{
  border:1px dashed #eef1f4;
  border-radius:10px;
  padding:6px;
  background:#fafbfc;
  margin-bottom:8px;
}
.svz-acc > summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
  font-size:13px;           /* menor */
  padding:4px 2px;          /* menor */
}
.svz-acc > summary::-webkit-details-marker{display:none}
.svz-acc-body{
  margin-top:8px;
  display:grid;
  gap:8px;                  /* menor */
}
.svz-acc-body label{
  font-size:11px;           /* menor */
  font-weight:700;
  margin-bottom:4px;
  display:block;
}

/* Swatches (mantive seu padrão, só deixei mais compacto) */
.svz-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:6px;                  /* menor */
}
.svz-swatches .svz-swatch{
  width:26px !important;    /* menor */
  height:26px !important;   /* menor */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid #d0d7de !important;
  border-radius:6px !important;
  background:#fff !important;
  cursor:pointer !important;
  box-sizing:content-box !important;
}
.svz-swatches .svz-swatch:hover{
  box-shadow:0 0 0 3px rgba(0,0,0,.06) inset !important
}
.svz-swatches .svz-swatch.active{
  outline:2px solid #111 !important;
  outline-offset:2px
}
.svz-swatches .svz-swatch.cor{background:var(--svz-color,#bbb) !important}
.svz-swatches .svz-swatch.svz-none{
  background:repeating-conic-gradient(#eee 0 10deg,#fff 10deg 20deg) !important;
  border-style:dashed !important
}
.svz-swatches .svz-swatch.tex img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:6px !important;
  display:block !important
}

/* Resumo abaixo do export (se você adicionou a div .svz-selection) */
.svz-selection{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e6e8eb;
  font-size:12px;
}
.svz-selection-title{
  font-weight:800;
  font-size:12px;
  margin-bottom:6px;
}
.svz-selection-list{
  margin:0;
  padding-left:16px;
}
.svz-selection-list li{
  margin:4px 0;
  line-height:1.25;
}

/* Responsivo */
@media (max-width:1024px){
  .svz-wrap{flex-wrap:wrap}
  .svz-canvas-col{position:relative; top:auto; min-width:100%}
  .svz-side{
    width:100%;
    position:static;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}