body:not([data-ready]) [data-_sf] variant-selects,body:not([data-ready]) [data-_sf] .product-form__input{display:none!important}.variant-picker{width:100%}.variant-picker__options{display:flex;flex-direction:column;gap:16px}.variant-picker__option-wrapper{width:100%}.variant-picker__empty-message{padding:16px;text-align:center;color:rgba(var(--color-foreground),.5);font-style:italic}.variant-option{width:100%}.variant-option__header{display:flex;align-items:baseline;gap:4px;margin-bottom:10px}.variant-option__name{font-size:var(--option-name-size, 16px)}.variant-option__selected-value{font-size:var(--selected-value-size, 16px);font-weight:400}.variant-pills{border:0;padding:0;margin:0}.variant-pills__grid{display:flex;flex-wrap:wrap;gap:8px}.variant-pills__grid--fit .variant-pill{flex:0 0 auto}.variant-pills__grid--fill .variant-pill{flex:0 0 auto;min-width:calc((100% - (var(--pill-columns-mobile, 3) - 1) * 8px) / var(--pill-columns-mobile, 3))}@media screen and (min-width:750px){.variant-pills__grid--fill .variant-pill{min-width:calc((100% - (var(--pill-columns-desktop, 4) - 1) * 8px) / var(--pill-columns-desktop, 4))}}.variant-pills__grid--custom .variant-pill{flex:0 0 auto;min-width:var(--pill-custom-width, 100px)}.variant-pill{position:relative}.variant-pill__label{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border:1px solid var(--pill-inactive-border);border-radius:var(--pill-corner-radius, 40px);background:var(--pill-inactive-bg, transparent);color:var(--pill-inactive-text, #121212);font-size:var(--pill-text-size, 14px);font-weight:var(--pill-font-weight, normal);text-align:center;cursor:pointer;transition:all .2s ease;position:relative}.variant-pills--border-none .variant-pill__label,.variant-pills--border-active .variant-pill__label{border-width:0}.variant-pill__label:hover{opacity:.8}.variant-pills--hover-bg .variant-pill:not(.is-active) .variant-pill__label:hover{background:var(--pill-hover-bg);opacity:1}.variant-pills--hover-text .variant-pill:not(.is-active) .variant-pill__label:hover{color:var(--pill-hover-text);opacity:1}.variant-pills--hover-border .variant-pill:not(.is-active) .variant-pill__label:hover{border-color:color-mix(in srgb,var(--pill-active-border) 40%,transparent);opacity:1}.variant-pills--border-active.variant-pills--hover-border .variant-pill:not(.is-active) .variant-pill__label:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pill-active-border) 40%,transparent)}.variant-pill.is-active .variant-pill__label{background:var(--pill-active-bg, #121212);color:var(--pill-active-text, #FFFFFF);border-color:var(--pill-active-border, #121212)}.variant-pills--border-active .variant-pill.is-active .variant-pill__label{box-shadow:inset 0 0 0 1px var(--pill-active-border, #121212)}.variant-pill.is-unavailable .variant-pill__label{opacity:.5;cursor:not-allowed;border-style:dashed}.variant-pill__visual{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.variant-pill__image{width:20px;height:20px;border-radius:var(--pill-visual-corner-radius, 50%);object-fit:cover}.variant-pill__swatch{width:20px;height:20px;border-radius:var(--pill-visual-corner-radius, 50%);border:1px solid rgba(0,0,0,.1)}.variant-pill__text{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-pill__check{position:absolute;top:-4px;right:4px;width:18px;height:18px;color:var(--variant-picker-check-color, #0E8E54);display:none}.variant-picker--has-check .variant-pill.is-active .variant-pill__check{display:block!important}.variant-pill__check svg{width:100%;height:100%}.variant-pill__badge{position:absolute;top:-6px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;height:16px;padding:0 6px;background:var(--pill-badge-bg, #121212);color:var(--pill-badge-text, #FFFFFF);font-size:9px;font-weight:600;line-height:1;text-transform:uppercase;border-radius:var(--pill-badge-border-radius, 4px);white-space:nowrap;z-index:1}.variant-dropdown{width:var(--dropdown-width, 100%);max-width:100%}.variant-dropdown--fit{width:auto;display:inline-block}.variant-dropdown--fit .variant-dropdown__wrapper{display:inline-flex;width:auto}.variant-dropdown--fit .variant-dropdown__select{width:auto}.variant-dropdown__wrapper{position:relative;display:flex;align-items:center}.variant-dropdown__select{width:100%;padding:12px 40px 12px 16px;border:1px solid rgba(var(--color-foreground),.2);border-radius:var(--dropdown-corner-radius, 0px);background:rgb(var(--color-background));color:rgb(var(--color-foreground));font-size:14px;line-height:1;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;box-shadow:var(--dropdown-shadow, none)}.variant-dropdown__select:focus{outline:none;border-color:rgb(var(--color-foreground))}.variant-dropdown__select option:disabled{color:rgba(var(--color-foreground),.4)}.variant-dropdown__icon{position:absolute;right:12px;pointer-events:none;color:rgb(var(--color-foreground));display:flex;align-items:center}.variant-dropdown--has-visual .variant-dropdown__select{padding-left:calc(16px + var(--dropdown-visual-size, 20px) + 10px)}.variant-dropdown__visual{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:var(--dropdown-visual-size, 20px);height:var(--dropdown-visual-size, 20px);pointer-events:none;z-index:1}.variant-dropdown__image{width:var(--dropdown-visual-size, 20px);height:var(--dropdown-visual-size, 20px);border-radius:var(--dropdown-visual-corner-radius, 50%);object-fit:cover}.variant-dropdown__swatch{width:var(--dropdown-visual-size, 20px);height:var(--dropdown-visual-size, 20px);border-radius:var(--dropdown-visual-corner-radius, 50%);border:1px solid rgba(0,0,0,.1)}.variant-swatches{border:0;padding:0;margin:0}.variant-swatches__grid{display:grid;gap:10px}.variant-swatches__grid--fill{grid-template-columns:repeat(var(--swatch-columns-mobile, 5),minmax(0,1fr))}@media screen and (min-width:750px){.variant-swatches__grid--fill{grid-template-columns:repeat(var(--swatch-columns-desktop, 6),minmax(0,1fr))}}.variant-swatches__grid--fixed{grid-template-columns:repeat(auto-fill,minmax(var(--swatch-size, 40px),max-content));gap:var(--swatch-spacing, 10px)}.variant-swatch{position:relative;overflow:visible}.variant-swatch__label{display:flex;flex-direction:column;align-items:center;gap:var(--swatch-label-spacing, 5px);cursor:pointer;overflow:visible}.variant-swatch__outer{position:relative;width:100%;aspect-ratio:1}.variant-swatches__grid--fixed .variant-swatch__outer{width:var(--swatch-size, 40px);height:var(--swatch-size, 40px)}.variant-swatch__inner{position:absolute;inset:calc(var(--swatch-inner-padding, 2px) + var(--swatch-border-thickness, 2px));border-radius:var(--swatch-corner-radius, 50%);box-shadow:var(--swatch-inner-border, inset 0 0 0 1px rgba(0, 0, 0, .1)),0 0 0 var(--swatch-inner-padding, 2px) rgb(var(--color-background)),0 0 0 calc(var(--swatch-inner-padding, 2px) + var(--swatch-border-thickness, 2px)) transparent;transition:box-shadow .2s ease}.variant-swatch.is-active .variant-swatch__inner{box-shadow:var(--swatch-inner-border, inset 0 0 0 1px rgba(0, 0, 0, .1)),0 0 0 var(--swatch-inner-padding, 2px) rgb(var(--color-background)),0 0 0 calc(var(--swatch-inner-padding, 2px) + var(--swatch-border-thickness, 2px)) var(--swatch-border-color, #121212)}.variant-swatches--border-all .variant-swatch__inner{box-shadow:var(--swatch-inner-border, inset 0 0 0 1px rgba(0, 0, 0, .1)),0 0 0 var(--swatch-inner-padding, 2px) rgb(var(--color-background)),0 0 0 calc(var(--swatch-inner-padding, 2px) + var(--swatch-border-thickness, 2px)) rgba(var(--color-foreground),.3)}.variant-swatches--border-all .variant-swatch.is-active .variant-swatch__inner{box-shadow:var(--swatch-inner-border, inset 0 0 0 1px rgba(0, 0, 0, .1)),0 0 0 var(--swatch-inner-padding, 2px) rgb(var(--color-background)),0 0 0 calc(var(--swatch-inner-padding, 2px) + var(--swatch-border-thickness, 2px)) var(--swatch-border-color, #121212)}.variant-swatches--hover-border .variant-swatch:not(.is-active) .variant-swatch__inner:hover{box-shadow:var(--swatch-inner-border, inset 0 0 0 1px rgba(0, 0, 0, .1)),0 0 0 var(--swatch-inner-padding, 2px) rgb(var(--color-background)),0 0 0 calc(var(--swatch-inner-padding, 2px) + var(--swatch-border-thickness, 2px)) color-mix(in srgb,var(--swatch-border-color) 40%,transparent)}.variant-swatch.is-unavailable .variant-swatch__label{opacity:.4;cursor:not-allowed}.variant-swatch.is-unavailable .variant-swatch__inner:after{content:"";position:absolute;top:50%;left:-2px;right:-2px;height:1px;background:rgba(var(--color-foreground),.5);transform:rotate(-45deg)}.variant-swatch__check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding:4px;box-sizing:content-box;color:var(--variant-picker-check-color, #0E8E54);display:none;z-index:1}.variant-picker--has-check .variant-swatch.is-active .variant-swatch__check{display:block!important}.variant-swatch__check svg{width:100%;height:100%}.variant-swatch__text{font-size:var(--swatch-label-size, 12px);line-height:1.1;text-align:center;word-break:break-word;overflow-wrap:break-word}.variant-images{border:0;padding:0;margin:0}.variant-images__grid{display:grid;grid-template-columns:repeat(var(--image-columns-mobile, 3),1fr);gap:8px}@media screen and (min-width:750px){.variant-images__grid{grid-template-columns:repeat(var(--image-columns-desktop, 4),1fr)}}.variant-image{position:relative}.variant-image__label{display:block;cursor:pointer}.variant-image__wrapper{position:relative;display:block;aspect-ratio:1;padding:var(--image-inner-padding, 0);border:var(--image-border-thickness, 2px) solid transparent;border-radius:var(--image-corner-radius, 4px);overflow:hidden;transition:border-color .2s ease}.variant-image.is-active .variant-image__wrapper{border-color:var(--image-border-color)}.variant-images--hover-border .variant-image:not(.is-active) .variant-image__wrapper:hover{border-color:color-mix(in srgb,var(--image-border-color) 40%,transparent)}.variant-image__img{width:100%;height:100%;object-fit:cover}.variant-image__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(var(--color-foreground),.05);color:rgba(var(--color-foreground),.3)}.variant-image.is-unavailable .variant-image__label{opacity:.4;cursor:not-allowed}.variant-image__badge{position:absolute;top:4px;right:4px;padding:2px 6px;background:var(--image-badge-bg, #121212);color:var(--image-badge-text, #FFFFFF);font-size:10px;font-weight:600;text-transform:uppercase;border-radius:2px;z-index:1}.variant-image__check{position:absolute;top:4px;right:4px;width:20px;height:20px;color:var(--variant-picker-check-color, #0E8E54);display:none}.variant-picker--has-check .variant-image.is-active .variant-image__check{display:block!important}.variant-image__check svg{width:100%;height:100%}.variant-containers{border:0;padding:0;margin:0}.variant-containers__grid{display:grid;gap:10px}.variant-containers__grid--fit{display:flex;flex-wrap:wrap;gap:var(--container-fixed-spacing, 10px)}.variant-containers__grid--fit .variant-container{flex:0 0 auto;container-type:normal}.variant-containers__grid--fit .variant-container__text{min-width:auto}.variant-containers__grid--fit .variant-container__heading,.variant-containers__grid--fit .variant-container__line-2,.variant-containers__grid--fit .variant-container__line-3{white-space:nowrap;overflow:visible;text-overflow:unset}.variant-containers__grid--fill{grid-template-columns:repeat(var(--container-columns-mobile, 2),1fr);column-gap:var(--container-spacing-h, 10px);row-gap:var(--container-spacing-v, 10px)}@media screen and (min-width:750px){.variant-containers__grid--fill{grid-template-columns:repeat(var(--container-columns-desktop, 3),1fr)}}.variant-containers__grid--fixed{display:flex;flex-wrap:wrap;gap:var(--container-fixed-spacing, 10px)}.variant-containers__grid--fixed .variant-container{flex:0 0 auto;min-width:var(--container-width, 100px);container-type:normal}.variant-containers__grid--fixed .variant-container__text{min-width:auto}.variant-containers__grid--fixed .variant-container__heading,.variant-containers__grid--fixed .variant-container__line-2,.variant-containers__grid--fixed .variant-container__line-3{white-space:nowrap;overflow:visible;text-overflow:unset}.variant-container{position:relative;container-type:inline-size}.variant-container__label{display:block;padding:calc(var(--container-padding, 12px) - 2px) 12px var(--container-padding, 12px) 12px;border:var(--container-border-thickness, 1px) solid transparent;border-radius:var(--container-corner-radius, 8px);background:var(--container-bg, transparent);color:var(--container-text, #121212);cursor:pointer;transition:all .2s ease;position:relative}.variant-containers--border-none .variant-container__label,.variant-containers--border-active .variant-container__label{border-width:0}.variant-containers--border-all .variant-container__label{border-color:var(--container-border-color)}.variant-containers--hover-border .variant-container:not(.is-active) .variant-container__label:hover{border-color:color-mix(in srgb,var(--container-border-color) 40%,transparent)}.variant-containers--border-active.variant-containers--hover-border .variant-container:not(.is-active) .variant-container__label:hover{box-shadow:inset 0 0 0 var(--container-border-thickness, 1px) color-mix(in srgb,var(--container-border-color) 40%,transparent)}.variant-containers--hover-bg .variant-container:not(.is-active) .variant-container__label:hover{background:var(--container-hover-bg)}.variant-containers--hover-text .variant-container:not(.is-active) .variant-container__label:hover{color:var(--container-hover-text)}.variant-container.is-active .variant-container__label{background:var(--container-active-bg, #F5F5F5);color:var(--container-active-text, #121212);border-width:var(--container-active-border-thickness, 2px);border-color:var(--container-border-color)}.variant-containers--border-none .variant-container.is-active .variant-container__label{border-width:0;border-color:transparent;box-shadow:none}.variant-containers--border-active .variant-container.is-active .variant-container__label{border-width:0;border-color:transparent;box-shadow:inset 0 0 0 var(--container-active-border-thickness, 2px) var(--container-border-color)}.variant-container.is-unavailable .variant-container__label{opacity:.4;cursor:not-allowed;border-style:dashed}.variant-container__content{display:flex;align-items:center;gap:12px}.variant-containers--align-center .variant-container__content{flex-direction:column;text-align:center}.variant-containers--align-center .variant-container__text{align-items:center}.variant-container__visual{display:flex;flex-shrink:0}.variant-container__image{width:var(--container-image-size, 32px);height:var(--container-image-size, 32px);object-fit:cover}.variant-container__image--circular{width:var(--container-swatch-size, 24px);height:var(--container-swatch-size, 24px);border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a}.variant-container__swatch{display:block;width:var(--container-swatch-size, 24px);height:var(--container-swatch-size, 24px);border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a}.variant-container__text{display:flex;flex-direction:column;min-width:0}.variant-container__heading{font-size:var(--container-heading-size, 14px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-container__line-2{font-size:var(--container-line-2-size, 12px);margin-top:var(--container-line-2-spacing, 2px);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-container__line-3{font-size:var(--container-line-3-size, 12px);margin-top:var(--container-line-3-spacing, 2px);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-container__badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;height:18px;padding:0 8px;background:var(--container-badge-bg, #121212);color:var(--container-badge-text, #FFFFFF);font-size:10px;font-weight:600;line-height:1;text-transform:uppercase;border-radius:var(--container-badge-border-radius, 4px);z-index:1;white-space:nowrap}.variant-container__check{position:absolute;top:-4px;right:4px;width:18px;height:18px;color:var(--variant-picker-check-color, #0E8E54);display:none}.variant-picker--has-check .variant-container.is-active .variant-container__check{display:block!important}.variant-container__check svg{width:100%;height:100%}.variant-container--card .variant-container__label{padding:8px 8px 7px}.variant-container__card-content{display:flex;flex-direction:column;gap:6px;width:100%}.variant-container__color-box{display:block;width:100%;aspect-ratio:2 / 1;border-radius:calc(var(--container-corner-radius, 8px) - 4px);box-shadow:inset 0 0 0 1px #00000014}.variant-container__color-box--image{object-fit:cover}.variant-container__card-text{display:flex;flex-direction:column;align-items:center}.variant-container__heading-box{display:flex;align-items:center;justify-content:center;width:100%;padding:7px 10px 4px;background:transparent;border-radius:calc(var(--container-corner-radius, 8px) - 4px)}.variant-container__heading-box--visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 15%,transparent)}.variant-container__heading-box .variant-container__heading{text-align:center;white-space:normal;overflow:visible;font-size:var(--container-heading-size, 12px);line-height:1}.variant-container__card-text .variant-container__line-2,.variant-container__card-text .variant-container__line-3{text-align:center}@container (max-width: 120px){.variant-container__label{padding:6px 8px 8px}.variant-container__content{gap:8px}.variant-container__heading{font-size:min(var(--container-heading-size, 14px),11px)}.variant-container__line-2{font-size:min(var(--container-line-2-size, 12px),10px)}.variant-container__line-3{font-size:min(var(--container-line-3-size, 12px),10px)}.variant-container__badge{height:14px;padding:0 5px;font-size:8px;top:-6px}.variant-container__check{width:14px;height:14px;top:-3px;right:3px}.variant-container--card .variant-container__label{padding:6px 6px 4px}.variant-container__card-content{gap:4px}.variant-container__heading-box{padding:4px 6px}.variant-container__heading-box .variant-container__heading{font-size:min(var(--container-heading-size, 12px),10px)}}.variant-picker .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.mobile-only{display:block}.desktop-only{display:none}@media screen and (min-width:750px){.mobile-only{display:none}.desktop-only{display:block}}
/*# sourceMappingURL=/cdn/shop/t/58/assets/component-variant-picker.css.map */
