.swatch {
display: inline-block;
margin: 5px;
cursor: pointer;
border: 1px solid #ddd;
outline: 2px solid #fff;
transition: all 0.3s ease;
transform: scale(1);
position: relative;
} .swatch.selected {
outline: 2px solid #000;
transform: scale(1.15);
} .swatch.selected::after {
content: '✓';
color: #fff;
font-size: 16px;
position: absolute;
top: 4px;
right: 8px;
} .color-swatch {
width: 30px;
height: 30px;
border-radius: 50%;
} .size-swatch {
border-radius: 999px;
background: #f0f0f0;
color: #333;
padding: 6px 14px;
font-size: 11px;
font-weight: bolder;
line-height: 1.2;
text-align: center;
min-width: auto;
display: inline-block;
} .swatch:hover {
transform: scale(1.1);
} .woo-swatches-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
} @media (max-width: 480px) {
.color-swatch {
width: 24px;
height: 24px;
}
.size-swatch {
font-size: 12px;
padding: 4px 10px;
}
}