.color-variants{width:100%;margin-top:calc(var(--body-padding-number)*1)}.color-variants__head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.color-variants__label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#a2a2a2}.color-variants__current{font-size:.9rem;font-weight:600;color:#000}.color-variants__list{display:grid;grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));gap:10px;margin:0;padding:0;list-style:none}.color-variants__item{display:flex;margin:0}.color-variants__swatch{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:5px;border:1px solid #e7e7e7;outline-offset:1px;outline-width:3px;outline-color:rgba(0,0,0,0);outline-style:solid;border-radius:4px;background:#fff;text-decoration:none;color:#000;transition:border-color .3s ease,outline-color .3s ease}.color-variants__swatch img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(4px - 2px)}.color-variants__name{margin-top:auto;padding-top:2px;font-size:11px;line-height:1.3;text-align:center;color:#000}.color-variants a.color-variants__swatch:hover{outline-color:rgba(0,158,236,.1);border-color:rgba(0,158,236,.5)}.color-variants__swatch.is-active{outline-color:rgba(217,0,116,.1);border-color:rgba(217,0,116,.5);cursor:default}