/* WPAAB General */
.wpaab { position: relative; display:block; margin: 1rem auto; }
.wpaab .wpaab-canvas { display:block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid #e5e7eb; background: #fff; }

/* Layout two columns */
.wpaab-layout { display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:start; }
@media (max-width: 1024px){ .wpaab-layout { grid-template-columns: 1fr; } }

/* Thumbnails grid */
.wpaab-thumbs { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
.wpaab-thumb {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  padding: 5px;
  width: 100px;
}
.wpaab-thumb img {
  display: inline-block;
  width: auto;
  height: 80px;
  background: #fff;
}
.wpaab-thumb[aria-pressed="true"]{ outline:2px solid #111; outline-offset:1px; }

/* Controls stack */
.wpaab-side { display:flex; flex-direction:column; gap:12px; }
.wpaab-group { border:1px solid #e5e7eb; border-radius:8px; padding:10px; background:#fff; }
.wpaab-group h4 { margin:0 0 8px; font: 600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#111; }
.wpaab-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom: 15px;}
.wpaab-row input[type="file"]{ max-width:100%; }
.wpaab-row input[type="range"]{ width:220px; }

/* Buttons row */
.wpaab-actions { display:flex; gap:8px; align-items:center; }
.wpaab-btn { padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; }
.wpaab-btn.primary { background:#111; color:#fff; border-color:#111; }

/* Editor preview cap + margins */
.wpaab-editor-wrap { max-height: 400px; overflow:auto; }
.wpaab-editor-thumbrow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 15px;
}
.wpaab-editor-thumbrow img { width:100%; height:70px; object-fit:cover; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }