/* Frontend styles for product colors shortcode */

.dz-product-colors-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	/* Center them as per the screenshot */
	align-items: center;
}

.dz-product-color-circle {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	/* Subtle border for lighter colors */

	/* Slight inner shadow to give depth */
	box-shadow: 0 0 0 2px #EFEFEF;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	opacity: 0.8;
}

.dz-product-color-circle:hover {
	transform: scale(1.1);
	box-shadow: 0 0 0 2px #CDCDCE;
}