/* Container */
.ec-variant-grid{ margin:1.25rem 0 1.75rem; }
.ec-variant-grid__heading{ 
  margin:0 0 .75rem; 
  font-size:1.125rem; 
  font-weight:600; 
  color:#222; /* donkere basistekst */
}

/* Grid */
.ec-variant-grid__items{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}

/* Tiles */
.ec-variant{
  display:block;
  position:relative;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  height:131px;
  text-decoration:none;
  transition:border .2s ease, box-shadow .2s ease, transform .15s ease;
}
.ec-variant:hover{
  border-color:#999;
  transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.ec-variant img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
}

/* Active (huidige product) */
.ec-variant.is-active {
  border-color:#444; 
  box-shadow:0 0 0 2px #444 inset;
}

/* Label linksboven */
.ec-variant.is-active::before {
  content:"✓ Geselecteerd";
  position:absolute; top:8px; left:8px;
  z-index:2;
  background:#444;     /* neutraal donkergrijs */
  color:#fff;
  font-weight:600;
  font-size:.75rem;
  line-height:1;
  padding:.25rem .55rem;
  border-radius:4px;
}

/* Subtiele overlay */
.ec-variant.is-active::after {
  content:"";
  position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,.05);
  border-radius:6px;
}

/* Basis styling voor de geselecteerde overlay */
.ec-variant.is-active::before {
  content: "Geselecteerd";
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  background: #111; color: #fff;
  font-weight: 700; font-size: .72rem; line-height: 1;
  padding: .22rem .45rem; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Alleen mobiel: vervang tekst door een SVG checkmark ---- */
@media (max-width: 480px) {
  .ec-variant.is-active::before {
    content: "";
    width: 20px; height: 20px;
    padding: 0;
    border-radius: 50%;
    background: #111 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center/14px 14px;
  }
}


/* "+N kleuren" tegel */
.ec-variant--more{
  display:flex; align-items:center; justify-content:center;
  background:#f9f9f9; 
  color:#444; 
  font-weight:600; 
  font-size:.95rem;
  border:1px dashed #bbb; 
  border-radius:6px;
  transition:background .2s ease, border-color .2s ease;
}
.ec-variant--more:hover{ 
  background:#f0f0f0; 
  border-color:#888; 
}