/* Only apply in mats contexts (we add .vm-mats-context dynamically too) */
.vm-mats-context .vcs-tooltip{
  display:none !important;
}

/* Numbers inside the circle */
.vm-mats-context .vcs-swatch,
.vm-mats-context .vcs-loop-swatch{
  position: relative !important;
}

.vm-mats-context .vm-area-num{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:11px;
  line-height:1;
  pointer-events:none;
  user-select:none;
  color:#111;
}

/* When swatch is selected/active, make text white (best-effort; different themes use different classes) */
.vm-mats-context .vcs-swatch.selected .vm-area-num,
.vm-mats-context .vcs-loop-swatch.selected .vm-area-num,
.vm-mats-context .vcs-swatch.is-selected .vm-area-num,
.vm-mats-context .vcs-loop-swatch.is-selected .vm-area-num,
.vm-mats-context .vcs-swatch.active .vm-area-num,
.vm-mats-context .vcs-loop-swatch.active .vm-area-num,
.vm-mats-context .vcs-swatch[aria-checked="true"] .vm-area-num,
.vm-mats-context .vcs-loop-swatch[aria-checked="true"] .vm-area-num,
.vm-mats-context .vcs-swatch[aria-pressed="true"] .vm-area-num,
.vm-mats-context .vcs-loop-swatch[aria-pressed="true"] .vm-area-num{
  color:#fff;
}

/* Ensure inner elements never steal clicks (fix "need 10 clicks") */
.vm-mats-context .vcs-swatch *,
.vm-mats-context .vcs-loop-swatch *{
  pointer-events:none !important;
}

/* Grid for category cards: target container we mark with .vm-area-grid */
.vm-area-grid{
  display:grid !important;
  grid-template-columns: repeat(var(--vm-cols, 5), 26px);
  gap:8px;
  align-items:center;
  justify-content:end;
}

@media (max-width: 768px){
  .vm-area-grid{
    grid-template-columns: repeat(var(--vm-cols-mobile, 4), 26px);
  }
}

/* Slightly more compact circles if needed */
.vm-mats-context .vcs-loop-swatch,
.vm-mats-context .vcs-swatch{
  /* keep existing size, but ensure text has room */
}

/* If some theme sets text color transparent on buttons, force visible */
.vm-mats-context .vcs-loop-swatch,
.vm-mats-context .vcs-swatch{
  color: inherit !important;
}