Bugs of color swatches

Hi,

I am not sure if this is a bug, but there’s a black-border square inside each of my color swatch. Please see this screenshot that indicates the issue:
screenshot of color swatches bug

This bug will show up if visiting the page through chrome desktop or safari mobile.

FYI, I’ve added the following CSS code into my product page, is this what trigger the issue?

.variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item {
	width: 40px;
	height: 40px;
}

.variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item span {
    width: 30px;
    height: 30px;
    position: relative;
}

.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item span {
    font-size: 0.8125rem;
}

• This topic was modified 6 years, 7 months ago by subtlehk.

The page I need help with: [log in to see the link]