.wcvs-swatches {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--wcvs-gap,8px);
    margin:0 0 12px;
}

.wcvs-native-select {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.wcvs-swatch {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:var(--wcvs-width,56px);
    min-height:var(--wcvs-height,44px);
    padding:6px 10px;
    box-sizing:border-box;
    background:#fff;
    color:inherit;
    border:var(--wcvs-border-width,1px) solid #cfcfcf;
    border-radius:var(--wcvs-radius,6px);
    cursor:pointer;
    font:inherit;
    line-height:1.2;
    transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}

.wcvs-swatch:hover {
    border-color:#222;
}

.wcvs-swatch:focus-visible {
    outline:2px solid currentColor;
    outline-offset:2px;
}

.wcvs-swatch.wcvs-selected {
    border-color:#111;
    box-shadow:0 0 0 2px rgba(0,0,0,.12);
}

.wcvs-color {
    width:var(--wcvs-color-size,32px);
    height:var(--wcvs-color-size,32px);
    flex:0 0 auto;
    display:block;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.18);
}

.wcvs-image {
    width:var(--wcvs-width,56px);
    height:var(--wcvs-height,44px);
    object-fit:cover;
    display:block;
    border-radius:max(0px,calc(var(--wcvs-radius,6px) - 2px));
}

.wcvs-type-image {
    padding:2px;
    overflow:hidden;
}

.wcvs-type-image .wcvs-label {
    position:absolute;
    left:4px;
    right:4px;
    bottom:4px;
    padding:3px 5px;
    background:rgba(0,0,0,.65);
    color:#fff;
    border-radius:3px;
    font-size:11px;
    text-align:center;
}

.wcvs-swatch.wcvs-disabled {
    opacity:.35;
    cursor:not-allowed;
}

.wcvs-swatch.wcvs-crossed::after {
    content:"";
    position:absolute;
    left:8%;
    top:50%;
    width:84%;
    height:1px;
    background:currentColor;
    transform:rotate(-45deg);
    pointer-events:none;
}

@media (max-width:480px) {
    .wcvs-swatches {
        gap:6px;
    }
    .wcvs-swatch {
        min-width:44px;
        min-height:40px;
        padding:5px 8px;
    }
    .wcvs-color {
        width:28px;
        height:28px;
    }
}