.shia-swatches-archive-wrap { margin-top: 10px; }
.shia-swatches-archive { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }

.shia-swatch-archive {
    width:18px; height:18px; border-radius:50%;
    border:1px solid #e6e6e6; box-sizing:border-box;
    display:inline-block; padding:0; cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    outline:none;
}
.shia-swatch-archive:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.06); border-color:#bdbdbd; }
.shia-swatch-archive:focus { box-shadow:0 0 0 3px rgba(0,0,0,0.06); }

.shia-swatch-more-archive {
    min-width:32px; height:20px; line-height:18px; border-radius:12px;
    background:#f7f7f7; border:1px solid #e6e6e6; padding:0 8px; font-size:12px;
    cursor:pointer;
}

@media (max-width: 768px) {
    .shia-swatch-archive { width:14px; height:14px; }
    .shia-swatch-more-archive { min-width:28px; font-size:11px; }
}