.hu-variant-picker{--hu-vp-gap: var(--hu-space-5);--hu-vp-chip-size: 2.75rem;--hu-vp-chip-pad: var(--hu-space-4);--hu-vp-chip-radius: min(var(--hu-radius-chip), 1.5rem);--hu-vp-swatch-size: 2.75rem;--hu-vp-ring: var(--hu-border-width-strong);display:grid;gap:var(--hu-vp-gap);min-inline-size:0}.hu-variant-picker[hidden]{display:none}.hu-variant-picker__option{display:grid;gap:var(--hu-space-3);min-inline-size:0;margin:0;padding:0;border:0}.hu-variant-picker__legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--hu-space-1) var(--hu-space-2);padding:0;margin:0;font-size:var(--hu-text-sm);line-height:var(--hu-lh-snug);overflow-wrap:anywhere}.hu-variant-picker__name{color:rgb(var(--hu-color-text-muted-rgb))}.hu-variant-picker__selected{font-weight:var(--hu-weight-strong);color:rgb(var(--hu-color-text-rgb))}.hu-variant-picker__values{display:flex;flex-wrap:wrap;gap:var(--hu-space-2);min-inline-size:0}.hu-variant-picker__input{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hu-variant-picker__pill{position:relative;display:inline-flex;max-inline-size:100%;cursor:pointer}.hu-variant-picker__label{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--hu-vp-chip-size);min-inline-size:var(--hu-vp-chip-size);max-inline-size:100%;padding-block:var(--hu-space-2);padding-inline:var(--hu-vp-chip-pad);border:var(--hu-border-width) solid var(--hu-color-field-border);border-radius:var(--hu-vp-chip-radius);background:var(--hu-field-bg);color:rgb(var(--hu-color-text-rgb));font-size:var(--hu-text-sm);line-height:var(--hu-lh-snug);text-align:center;overflow-wrap:anywhere;transition:background-color var(--hu-dur-fast) var(--hu-ease-standard),border-color var(--hu-dur-fast) var(--hu-ease-standard),color var(--hu-dur-fast) var(--hu-ease-standard),box-shadow var(--hu-dur-fast) var(--hu-ease-standard)}@media(hover:hover)and (pointer:fine){.hu-variant-picker__pill:hover .hu-variant-picker__label{border-color:var(--hu-color-text)}}.hu-variant-picker__input:checked+.hu-variant-picker__label{border-color:var(--hu-btn-bg);background:var(--hu-btn-bg);color:var(--hu-btn-fg);font-weight:var(--hu-weight-strong)}.hu-variant-picker__input:focus-visible+.hu-variant-picker__label,.hu-variant-picker__input:focus-visible+.hu-variant-picker__swatch-face{outline:var(--hu-focus-ring-width) solid var(--hu-focus-ring-color);outline-offset:var(--hu-focus-ring-offset)}.hu-variant-picker__pill.is-sold-out .hu-variant-picker__label{border-style:dashed;color:rgb(var(--hu-color-text-muted-rgb));text-decoration:line-through;text-decoration-thickness:var(--hu-border-width)}.hu-variant-picker__pill.is-sold-out .hu-variant-picker__input:checked+.hu-variant-picker__label{color:var(--hu-btn-fg)}.hu-variant-picker__pill.is-disabled .hu-variant-picker__label,.hu-variant-picker__swatch.is-disabled .hu-variant-picker__swatch-face{opacity:.45}.hu-variant-picker__swatch{position:relative;display:inline-flex;inline-size:var(--hu-vp-swatch-size);block-size:var(--hu-vp-swatch-size);border-radius:var(--hu-swatch-radius);cursor:pointer}.hu-variant-picker__swatch-face{position:relative;display:grid;place-items:center;inline-size:100%;block-size:100%;border:var(--hu-vp-ring) solid transparent;border-radius:inherit;transition:border-color var(--hu-dur-fast) var(--hu-ease-standard),opacity var(--hu-dur-fast) var(--hu-ease-standard)}.hu-variant-picker__swatch-face .hu-swatch{box-shadow:0 0 0 1px rgb(var(--hu-color-text-rgb) / .2)}@media(hover:hover)and (pointer:fine){.hu-variant-picker__swatch:hover .hu-variant-picker__swatch-face{border-color:rgb(var(--hu-color-text-rgb) / .4)}}.hu-variant-picker__input:checked+.hu-variant-picker__swatch-face{border-color:var(--hu-color-text)}.hu-variant-picker__swatch.is-sold-out .hu-swatch{opacity:.4}.hu-variant-picker__swatch.is-sold-out .hu-variant-picker__swatch-face:after{content:"";position:absolute;top:22%;right:22%;bottom:22%;left:22%;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--hu-color-text) calc(50% - 1px),var(--hu-color-text) calc(50% + 1px),transparent calc(50% + 1px));pointer-events:none}.hu-variant-picker__swatch[data-hu-swatch-name]:after{content:attr(data-hu-swatch-name);position:absolute;inset-block-end:calc(100% + var(--hu-space-2));inset-inline-start:50%;z-index:var(--hu-z-raised);max-inline-size:14rem;padding:var(--hu-space-1) var(--hu-space-2);border-radius:var(--hu-radius-xs);background:var(--hu-color-text);color:var(--hu-color-bg);font-size:var(--hu-text-xs);line-height:var(--hu-lh-snug);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transform:translate(-50%,var(--hu-space-1));transition:opacity var(--hu-dur-fast) var(--hu-ease-standard),transform var(--hu-dur-fast) var(--hu-ease-standard)}@media(hover:hover)and (pointer:fine){.hu-variant-picker__swatch[data-hu-swatch-name]:hover:after{opacity:1;transform:translate(-50%)}}.hu-variant-picker__swatch[data-hu-swatch-name]:has(.hu-variant-picker__input:focus-visible):after{opacity:1;transform:translate(-50%)}.hu-variant-picker__option--dropdown{gap:var(--hu-space-2)}.hu-variant-picker__select{inline-size:100%;text-overflow:ellipsis}@media(forced-colors:active){.hu-variant-picker__input:checked+.hu-variant-picker__label,.hu-variant-picker__input:checked+.hu-variant-picker__swatch-face{outline:var(--hu-border-width-strong) solid Highlight;outline-offset:0}.hu-variant-picker__swatch.is-sold-out .hu-variant-picker__swatch-face:after{background:CanvasText;clip-path:polygon(0 100%,4% 100%,100% 4%,100% 0,96% 0,0 96%)}}@media(prefers-reduced-motion:reduce){.hu-variant-picker__label,.hu-variant-picker__swatch-face,.hu-variant-picker__swatch[data-hu-swatch-name]:after{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/component-variant-picker.css.map */