.swatches{border:none;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}.swatches__wrapper{gap:.5rem}.swatches__swatch{border:.0625rem solid var(--color-gray-dark);border-radius:.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;height:3.125rem;padding:.25rem;position:relative;-webkit-transition:all var(--duration-default) ease-in-out;-o-transition:all var(--duration-default) ease-in-out;transition:all var(--duration-default) ease-in-out;width:3.125rem}@media screen and (min-width:768px){.swatches__swatch{height:4rem;width:4rem}}.swatches__swatch:before{border:.0625rem solid var(--color-white);border-radius:.4375rem;bottom:0;content:"";height:calc(100% - .125rem);left:0;position:absolute;right:0;top:0;-webkit-transition:all var(--duration-default) ease-in-out;-o-transition:all var(--duration-default) ease-in-out;transition:all var(--duration-default) ease-in-out;width:calc(100% - .125rem)}.swatches__swatch a{text-decoration:none}.swatches__swatch--active,.swatches__swatch:active,.swatches__swatch:focus,.swatches__swatch:hover{border:.0625rem solid var(--color-brand-primary);-webkit-transition:all var(--duration-default) ease-in-out;-o-transition:all var(--duration-default) ease-in-out;transition:all var(--duration-default) ease-in-out}.swatches__swatch--active:before,.swatches__swatch:active:before,.swatches__swatch:focus:before,.swatches__swatch:hover:before{border-color:var(--color-brand-primary)}.swatches__swatch .img{padding-bottom:100%}.swatches span{display:inline-block}.swatches span:first-letter{text-transform:capitalize}