/* Core layout */
.givingboard-wrapper { position: relative; display: block; max-width: 100%; }
.givingboard-hidden-image { display:block; width:100%; height:auto; position:relative; z-index:1; }

/* Grid overlay */
.givingboard-grid {
  position:absolute; inset:0; z-index:2;
  display:grid; gap:6px; padding:6px; box-sizing:border-box;
  background:#cbd5e1;
}

/* Tiles show image slice */
.givingboard-tile {
  position:relative; cursor:pointer;
  background-image:var(--gb-img);
  background-size:calc(100% * var(--gb-cols)) calc(100% * var(--gb-rows));
  background-position:var(--x,50%) var(--y,50%); background-repeat:no-repeat;
  border:1px solid #d1d5db; overflow:hidden;
}

/* Cover */
.givingboard-tile::before { content:""; position:absolute; inset:0; background:#e5e7eb; transition:opacity .18s ease; }
.givingboard-tile.revealed::before { opacity:0; }

/* Selection */
.givingboard-tile[aria-pressed="true"] { outline:2px solid #2563eb; outline-offset:-2px; }

/* Lasso */
.gb-lasso { position:absolute; border:1px dashed #2563eb; background:rgba(37,99,235,.08); pointer-events:none; z-index:3; }

/* Toolbars (now outside wrapper) */
.gb-toolbar { position:relative; z-index:5; display:flex; align-items:center; gap:10px; padding:8px 10px; margin:8px 0; border:1px solid #e5e7eb; border-radius:10px; background:#f8fafc; }
.gb-toolbar--top { margin-bottom:12px; }
.gb-toolbar--bottom { margin-top:12px; }
.gb-spacer { flex:1; }

.gb-pill { display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; border:1px solid #e5e7eb; font-weight:600; }
.gb-pill--price{ background:#fff7ed; }
.gb-pill--subtotal{ background:#ecfeff; }
.gb-pill--raised{ background:#f1f5f9; }
.gb-pill--after{ background:#f0fdf4; }