ui-swatches{border-radius:6px;padding:12px;border:1px solid var(--color-navy);display:grid;gap:10px;align-items:center;box-sizing:border-box;--swatch-size: 30px}ui-swatches.is-inline{display:block;gap:20px}.ui-swatches__prefix{font-size:14px;font-weight:500;line-height:18px;letter-spacing:.14px;position:relative;display:flex;align-items:center;margin-bottom:10px;font-family:var(--font-caption-family)}.ui-swatches__options{display:flex;align-items:center;gap:8px}.ui-swatches__radio{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.ui-swatches__swatch{display:block;border-radius:50%;height:var(--swatch-size);width:var(--swatch-size);background-color:var(--swatch-color);position:relative;transition:all .3s ease-in-out;border:solid 1px transparent}.ui-swatches__swatch:before{background-color:var(--swatch-color);border:solid 2px transparent;content:"";border-radius:50%;display:block;width:100%;height:100%}.ui-swatches__radio:checked~.ui-swatches__swatch{border-color:var(--color-navy)}.ui-swatches__radio:checked~.ui-swatches__swatch:before{border-color:#fff}.ui-swatches__radio:checked~.ui-swatches__text{opacity:1}.ui-swatches__radio:not(:checked)~.ui-swatches__swatch{opacity:.5}.ui-swatches__label{position:relative;display:flex;align-items:center;cursor:pointer;font-family:var(--font-caption-family);font-size:13px;font-weight:700;line-height:14px;letter-spacing:1.04px;text-transform:uppercase}ui-swatches:focus-within{outline:solid .2rem var(--color-navy);outline-offset:.2rem;border-color:#d5d5d8}.ui-swatches__label:has(input:focus-visible) .ui-swatches__swatch:before{outline:.2rem solid var(--color-navy)}.ui-swatches__label:hover .ui-swatches__swatch{opacity:1}.ui-swatches__text{margin-left:6px;opacity:.6;transition:opacity .3s ease-in-out}@media screen and (min-width:390px){ui-swatches{padding:12px 16px}.ui-swatches__options{gap:20px}}@media screen and (min-width:750px){ui-swatches{padding:15px}.ui-swatches__options{gap:8px}.ui-swatches__label{font-size:14px}.ui-swatches__text{margin-left:10px}}@media screen and (min-width:1200px){ui-swatches.is-inline{display:inline-flex}.ui-swatches__options{margin-top:0}.ui-swatches__prefix{margin-bottom:0}}ui-swatches.is-stacked{border:none;padding:0;display:flex;flex-direction:column;gap:10px;align-items:stretch;--swatch-size: 36px}ui-swatches.is-stacked:focus-within{outline:none;border-color:transparent}ui-swatches.is-stacked .ui-swatches__prefix{margin-bottom:4px}ui-swatches.is-stacked .ui-swatches__options{flex-direction:column;align-items:stretch;gap:8px;width:100%}ui-swatches.is-stacked .ui-swatches__label{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--color-navy);border-radius:8px;gap:12px;font-size:0;line-height:0}ui-swatches.is-stacked .ui-swatches__label:has(.ui-swatches__radio:checked){border-width:2px;padding:11px 13px}ui-swatches.is-stacked .ui-swatches__swatch{opacity:1;flex-shrink:0}ui-swatches.is-stacked .ui-swatches__swatch:before{opacity:1;border:solid 1px rgba(0,0,0,.12)}ui-swatches.is-stacked .ui-swatches__radio:checked~.ui-swatches__swatch{border-color:transparent}ui-swatches.is-stacked .ui-swatches__radio:checked~.ui-swatches__swatch:before{border-color:#0000001f}ui-swatches.is-stacked .ui-swatches__radio:not(:checked)~.ui-swatches__swatch{opacity:1}ui-swatches.is-stacked .ui-swatches__text{margin-left:0;opacity:1;flex:1;min-width:0;text-align:left}ui-swatches.is-stacked .ui-swatches__text-stack{display:flex;flex-direction:column;gap:2px;align-items:flex-start}ui-swatches.is-stacked .ui-swatches__text-title{display:block;font-family:var(--font-caption-family);font-size:13px;font-weight:700;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:inherit}ui-swatches.is-stacked .ui-swatches__text-sub{display:block;font-family:var(--font-caption-family);font-size:11px;font-weight:400;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--color-faded, #6b6b6b)}ui-swatches.is-stacked .ui-swatches__label:has(input:focus-visible){outline:.2rem solid var(--color-navy);outline-offset:.2rem}ui-swatches.is-stacked .ui-swatches__label:has(input:focus-visible) .ui-swatches__swatch:before{outline:none}@media screen and (min-width:1200px){ui-swatches.is-stacked{display:flex}ui-swatches.is-stacked .ui-swatches__options.is-inline{flex-direction:row}}
/*# sourceMappingURL=/cdn/shop/t/387/assets/component-ui-swatches.css.map */