@layer components{.variant-picker{display:flex;flex-direction:column;gap:var(--space-6)}.variant-picker__group{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;border:0}.variant-picker__legend{display:block;inline-size:100%;padding:0;margin-block-end:var(--space-1)}.variant-picker__label{font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-wide);text-transform:var(--label-transform);color:var(--color-text)}.variant-picker__value{margin-inline-start:var(--space-2);font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:none;color:var(--color-text-muted)}.variant-picker__options{display:flex;flex-wrap:wrap;gap:var(--space-2)}.variant-picker__swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),background-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.variant-picker__input:focus-visible+.variant-picker__swatch{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.variant-picker__pill{min-block-size:var(--target-touch);min-inline-size:var(--target-touch);padding-inline:var(--space-4);font-size:var(--btn-sm-fs);font-weight:var(--fw-normal);letter-spacing:var(--ls-wide);color:var(--color-text);background-color:var(--color-surface);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--btn-radius)}.variant-picker__pill:hover{border-color:var(--color-border-strong);color:var(--color-brand)}.variant-picker__input:checked+.variant-picker__pill{color:var(--color-brand);border-color:var(--color-brand);box-shadow:inset 0 0 0 var(--border-width) var(--color-brand)}.variant-picker--swatches .variant-picker__swatch:not(.variant-picker__pill){inline-size:var(--target-touch);block-size:var(--target-touch);border-radius:var(--radius-full);background-color:var(--swatch-color, var(--color-surface-sunken));background-image:var(--swatch-image, none);background-size:cover;background-position:center;border:var(--border-width) var(--border-style) var(--color-border);box-shadow:inset 0 0 0 2px var(--color-surface)}.variant-picker--swatches .variant-picker__swatch:not(.variant-picker__pill):hover{border-color:var(--color-border-strong)}.variant-picker__input:checked+.variant-picker__swatch:not(.variant-picker__pill){border-color:var(--color-brand);box-shadow:inset 0 0 0 2px var(--color-surface),0 0 0 var(--border-width) var(--color-brand)}.variant-picker__unavailable{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}.is-unavailable .variant-picker__unavailable,.is-nonexistent .variant-picker__unavailable{opacity:1;background-image:linear-gradient(to top left,transparent calc(50% - .5px),currentColor calc(50% - .5px),currentColor calc(50% + .5px),transparent calc(50% + .5px))}.variant-picker--swatches .variant-picker__swatch:not(.variant-picker__pill) .variant-picker__unavailable{border-radius:var(--radius-full);overflow:hidden}.variant-picker__swatch.is-unavailable{color:var(--color-text-subtle);border-color:var(--color-border-subtle)}.variant-picker__swatch.is-nonexistent{opacity:.45}.variant-picker__input:checked+.variant-picker__swatch.is-unavailable,.variant-picker__input:checked+.variant-picker__swatch.is-nonexistent{opacity:1;color:var(--color-brand);border-color:var(--color-brand)}.variant-picker--dropdown .variant-picker__group .select{max-inline-size:22rem}.variant-picker__noscript{margin-block-start:var(--space-4)}.variant-picker__noscript .select__control{max-inline-size:22rem}@media(max-width:39.99em){.variant-picker{gap:var(--space-5)}.variant-picker__pill{flex:1 1 auto;padding-inline:var(--space-3)}.variant-picker--dropdown .variant-picker__group .select,.variant-picker__noscript .select__control{max-inline-size:none}}@media(prefers-reduced-motion:reduce){.variant-picker__swatch{transition:none}}@media(forced-colors:active){.variant-picker__input:checked+.variant-picker__swatch{outline:2px solid currentColor}.variant-picker__swatch.is-unavailable,.variant-picker__swatch.is-nonexistent{opacity:1;text-decoration:line-through}}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/component-variant-picker.css.map */