:root {
	--jcro-vt-image-width: 8em;
	--jcro-vt-gap: .8em;
	--jcro-vt-selected-outline: #7f54b3;
}

.jcro-variation-table {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcro-vt-gap);
	.jcro-variation-item {
		width: var(--jcro-vt-image-width);
		cursor: pointer;
		padding: unset;
		background: unset;
		border-radius: unset;
		border: unset;
		
		img {
			margin-bottom: var(--jcro-vt-gap);
			outline: 2px solid transparent;
			transition: all 400ms;
		}
		
		&.jcro-variation-selected img {
			outline-color: var(--jcro-vt-selected-outline);
			opacity: 0.6;
			transition: all 200ms;
		}
		
		.jcro-variation-title {
			display: block;
			font-size: 14px;
			font-weight: 600;
			margin-bottom: .1em;
		}
	}
}

body:has(.jcro-variation-table) table.variations { display:none; }