.variant-picker{display:flex;flex-direction:column;gap:var(--space-md)}.variant-picker__group{display:flex;flex-direction:column;gap:var(--space-xs)}.variant-picker__label-row{display:flex;align-items:baseline;gap:var(--space-xs)}.variant-picker__label{font-size:.875rem;font-weight:600;color:var(--color-text)}.variant-picker__selected-value{font-size:.875rem;color:var(--color-text-subtle)}.variant-picker__label-row .variant-picker__label:after{content:"\a0:"}.variant-picker__selected-value{display:none}.variant-picker__pills{display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:0;margin:0}.variant-picker__pill{-webkit-appearance:none;appearance:none;font:inherit;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--space-md);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;background:#0b070747;border:1px solid rgba(255,255,255,.14);color:var(--color-text);transition:border-color .18s,background .18s,color .18s,transform .12s}.variant-picker__pill:hover:not(.is-unavailable):not(.is-selected){border-color:#e2001a8c;background:#e2001a14}.variant-picker__pill.is-selected{background:linear-gradient(#e2001a,#e2001a) padding-box,linear-gradient(100deg,#7b1619,#e2001a 42%,#f26a1c 72%,#f1c100) border-box;border:2px solid transparent;color:#fff;outline:none}.variant-picker__pill.is-selected:before{display:none}.variant-picker__pill:focus-visible{outline:2px solid rgba(226,0,26,.6);outline-offset:2px}.variant-picker__pill.is-unavailable{opacity:.38;cursor:not-allowed}.variant-picker__pill.is-unavailable span:first-of-type{text-decoration:line-through;text-decoration-color:currentColor}.variant-picker__pill-cross{display:none}.variant-picker__pill.is-unavailable .variant-picker__pill-cross{display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.variant-picker__pill.is-unavailable .variant-picker__pill-cross:before{content:"";position:absolute;top:50%;left:8%;right:8%;height:1px;background:currentColor;transform:rotate(-18deg) translateY(-50%);opacity:.45}.variant-picker__swatches{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:0;margin:0}.variant-picker__swatch{-webkit-appearance:none;appearance:none;font:inherit;border:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;padding:3px;background:transparent;cursor:pointer;transition:background-color .18s}.variant-picker__swatch:before{display:none}.variant-picker__swatch:hover:not(.is-selected):not(.is-unavailable){background:#ffffff24}.variant-picker__swatch.is-selected{background:linear-gradient(135deg,#7b1619,#e2001a 40%,#f26a1c 70%,#f1c100)}.variant-picker__swatch.is-unavailable{opacity:.5;cursor:not-allowed}.variant-picker__swatch-color{display:block;width:100%;height:100%;border-radius:50%;background-color:var(--swatch-color, #ccc);border:1px solid rgba(0,0,0,.08)}.variant-picker__swatch-cross{display:none}.variant-picker__swatch.is-unavailable .variant-picker__swatch-cross{display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.variant-picker__swatch.is-unavailable .variant-picker__swatch-cross:before{content:"";position:absolute;top:50%;left:10%;right:10%;height:1px;background:#fff;transform:rotate(-45deg) translateY(-50%);opacity:.8}.variant-picker__select{width:100%;padding:var(--space-sm) var(--space-md);font-size:1rem;color:var(--color-text);background-color:var(--color-surface);border:var(--border-width) solid var(--color-text-subtle);border-radius:var(--radius-md);min-height:44px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-sm) center;padding-right:calc(var(--space-md) + 20px);cursor:pointer}.variant-picker__select:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.variant-picker__select option[disabled]{color:var(--color-text-subtle)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-variant-picker.css.map */