/* Vision Kleurgroepen – storefront */
.vcg-colors { margin: 14px 0 18px; }
.vcg-colors__label { font-size: 15px; margin-bottom: 10px; color: #111; }
.vcg-colors__current { color: #777; margin-left: 2px; }
.vcg-colors__grid { display: flex; flex-wrap: wrap; gap: 12px; }
.vcg-swatch {
	position: relative; display: block; width: 92px; aspect-ratio: 4 / 5;
	border: 1px solid #e2e2e2; border-radius: 4px; overflow: hidden; background: #fafafa;
	transition: border-color .15s, box-shadow .15s;
}
.vcg-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.vcg-swatch:hover { border-color: #111; }
.vcg-swatch.is-active { border: 2px solid #111; }
.vcg-swatch.is-out { opacity: .55; }
.vcg-swatch.is-out::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 1px), #d33 calc(50% - 1px), #d33 calc(50% + 1px), transparent calc(50% + 1px));
}
@media (max-width: 600px) {
	.vcg-swatch { width: calc((100% - 36px) / 4); }
}

/* colour dots in the product grid */
.vcg-dots { display: flex; align-items: center; gap: 5px; margin: 6px 0 2px; }
.vcg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vcg-c, #ddd); border: 1px solid rgba(0,0,0,.18); box-sizing: border-box; display: inline-block; }
.vcg-dot.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111; }
.vcg-dot-more { font-size: 11px; color: #777; margin-left: 2px; }