.roctic-colour-swatches{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:3;width:100%;margin-top:6px}
.roctic-colour-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;width:52px;min-height:44px;color:inherit;text-align:center;text-decoration:none;font-size:10px;line-height:1.25;position:relative;pointer-events:auto}
.roctic-colour-swatch__image{width:42px;height:42px;object-fit:contain;border:1px solid #c4c9c3;border-radius:50%;background:#fff;display:block}
.roctic-colour-swatch:hover .roctic-colour-swatch__image{border-color:currentColor}
.roctic-colour-swatch:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.variant-option__button-label.roctic-colour-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:84px;min-width:84px;max-width:84px;height:auto;min-height:100px;padding:7px 5px;border:1px solid #c4c9c3;border-radius:8px;background:#fff;color:#242b28}
.roctic-colour-choice .roctic-colour-choice__image{display:block;width:62px;height:62px;object-fit:contain;background:#fff;border-radius:5px}
.roctic-colour-choice__text{font-size:12px;line-height:1.25;text-align:center;white-space:normal;position:relative}
.variant-option__button-label.roctic-colour-choice:has(input:checked){outline:2px solid currentColor;outline-offset:1px}
.variant-option__button-label.roctic-colour-choice:has(input:focus-visible){outline:3px solid currentColor;outline-offset:3px}

.variant-option__button-label.roctic-colour-choice .roctic-colour-choice__text{color:#242b28!important}