.variant-picker .variant-option--material-buttons,.variant-picker .variant-option--swatches{gap:10px}.variant-picker .variant-option--material-buttons legend,.variant-picker .variant-option--swatches legend{width:100%}.variant-picker .variant-option--swatches .variant-option__button-label--has-swatch{width:58px;height:44px;min-width:58px;min-height:44px;flex:0 0 58px;display:flex;align-items:stretch;justify-content:stretch;padding:0;border:1px solid var(--black-10, rgba(37, 30, 27, .1));border-radius:0;background:var(--white, #fff);overflow:hidden;outline:none;transition:border-color .3s ease,background-color .3s ease}.variant-picker .variant-option--swatches .variant-option__button-label--has-swatch .swatch{display:block;width:100%;height:100%;border:0;border-radius:0;background-size:cover;background-position:var(--swatch-focal-point, center)}@media(hover:hover){.variant-picker .variant-option--swatches .variant-option__button-label--has-swatch:hover{border-color:var(--black, #251E1B);background:var(--second-light);outline:none}}.variant-picker .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked){border-color:var(--black, #251E1B);background:var(--second-light);color:var(--black, #251E1B);padding:4px;outline:none}.variant-picker .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked):after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid var(--white, #fff);pointer-events:none;z-index:2}.variant-picker .variant-option--swatches .variant-option__button-label--has-swatch:has(:focus-visible){outline:1px solid var(--black, #251E1B);outline-offset:2px}.variant-picker .variant-option__legend{display:flex;align-items:baseline;gap:2px;width:100%;margin-bottom:12px;font-size:12px;font-weight:500;line-height:normal;color:var(--black-50, rgba(37, 30, 27, .7))}.variant-picker .variant-option__selected-value{color:var(--black)}.variant-picker .variant-option__name:after{content:":";color:var(--black-50)}.variant-picker .variant-option__button-label--material{width:58px;height:44px;min-width:58px;min-height:44px;flex:0 0 58px;padding:0;border:1px solid var(--black-10, rgba(37, 30, 27, .1));border-radius:0;background:var(--white, #fff);overflow:hidden;transition:border-color .3s ease,background-color .3s ease}@media(hover:hover){.variant-picker .variant-option__button-label--material:hover{border-color:var(--black);background:var(--second-light)}}.variant-picker .variant-option__button-label--material:has(:checked){border-color:var(--black);background:var(--second-light);color:var(--black);padding:4px}.variant-picker .variant-option__button-label--material:has(:checked):after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid var(--white, #fff);pointer-events:none;z-index:2}.variant-picker .variant-option__button-label--material:has(:focus-visible){outline:1px solid var(--black, #251E1B);outline-offset:2px}.variant-picker .variant-option__material-image{display:block;width:100%;height:100%;object-fit:cover}.variant-picker .variant-option__material-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:4px;font-size:9px;line-height:110%;text-align:center;white-space:normal;color:var(--black, #251E1B);background:var(--second-light)}.variant-picker .variant-option__button-label--material .variant-option__button-label__text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.variant-picker .variant-option__button-label--material svg{z-index:3}.material-option-popover{position:fixed;z-index:50;display:none;width:min(480px,calc(100vw - 32px));height:auto;background:var(--white);border:1px solid var(--black-10, rgba(37, 30, 27, .1));pointer-events:none}.material-option-popover.is-active{display:block}.material-option-popover .material-option-template__images{display:flex;justify-content:center;padding:24px;border-bottom:1px solid var(--black-10);background:var(--second-light)}.material-option-popover .material-option-template__image{display:block;width:55%;aspect-ratio:1 / 1;object-fit:cover}.material-option-popover .material-option-template__content{padding:16px 24px;background:var(--white)}.material-option-template__title{margin:0 0 4px;font-size:16px;font-weight:500;line-height:140%;color:var(--black, #251E1B)}.material-option-template__description{font-size:14px;font-weight:400;line-height:140%;color:var(--black-80-1)}.material-option-template__description p{margin:0}.material-option-template__description p+p{margin-top:10px}.material-option-template{background:var(--white)}.material-option-template__note{margin:0 24px 24px;padding:12px;border:1px solid var(--black-10);background:var(--second-light);font-size:14px;font-weight:400;line-height:140%;color:var(--black, #251E1B)}.material-option-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:none;pointer-events:none}.material-option-modal.is-active{display:block}.material-option-modal.is-open{pointer-events:auto}html.material-option-modal-open,html.material-option-modal-open body{overflow:hidden;overscroll-behavior:none}.material-option-modal__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);opacity:0;transition:opacity .3s ease}.material-option-modal.is-open .material-option-modal__overlay{opacity:1}.material-option-modal__dialog{position:absolute;right:0;bottom:0;left:0;display:flex;flex-direction:column;max-height:calc(100dvh - 169px);background:var(--second-light);transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);will-change:transform;overscroll-behavior:contain}.material-option-modal.is-open .material-option-modal__dialog{transform:translateY(0)}.material-option-modal__header{position:relative;z-index:2;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;min-height:54px;padding:0 16px;border-bottom:1px solid var(--black-10);background:var(--second-light)}.material-option-modal__close{grid-column:3;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--black, #251E1B);cursor:pointer}.material-option-modal__close img{display:block;width:20px;height:20px;object-fit:contain}.material-option-modal__heading{grid-column:2;grid-row:1;margin:0;font-size:18px;font-weight:500;line-height:normal;text-align:center;text-transform:uppercase;color:var(--black)}.material-option-modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}.material-option-modal__body::-webkit-scrollbar{display:none}.material-option-modal__thumbs{display:flex;gap:10px;margin:0 0 16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}.material-option-modal__thumbs::-webkit-scrollbar{display:none}.material-option-modal__thumb{position:relative;width:56px;height:44px;min-width:56px;padding:0;border:1px solid transparent;background:var(--white, #fff);cursor:pointer;overflow:hidden}.material-option-modal__thumb.is-active{border-color:var(--black, #251E1B);padding:4px}.material-option-modal__thumb.is-active:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--black);pointer-events:none}.material-option-modal__thumb img{display:block;width:100%;height:100%;object-fit:cover}.material-option-modal__main .material-option-template__images{display:flex;justify-content:center;margin:0 0 16px;padding:16px 0;background:var(--second-light)}.material-option-modal__main .material-option-template__image{display:block;width:65%;aspect-ratio:358 / 230;object-fit:cover}.material-option-modal__main .material-option-template__content{padding:0}.material-option-modal__main .material-option-template__title{margin:0 0 8px;font-size:16px;font-weight:500;line-height:140%;color:var(--black)}.material-option-modal__main .material-option-template__description{font-size:14px;font-weight:400;line-height:140%;color:var(--black-80-1);letter-spacing:-.2px}.material-option-modal__note{margin-top:16px;padding:12px;border:1px solid var(--black-10);background:var(--second-light);font-size:14px;line-height:140%;color:var(--black)}.material-option-modal__footer{flex:0 0 auto;padding:0 16px 16px;background:var(--second-light)}@supports (padding: max(0px)){.material-option-modal__footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}}.material-option-modal__select{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:41px;border:0;border-radius:100px;background:var(--black);color:var(--white);font-size:14px;font-weight:500;line-height:normal;cursor:pointer;transition:background-color .3s ease,color .3s ease}@media(hover:hover){.material-option-modal__select:hover{background-color:var(--second-light);color:var(--black)}}@media screen and (max-width:749px){.variant-picker .variant-option--material-buttons{gap:11px}.variant-picker .variant-option__legend{margin-bottom:12px;font-size:12px;font-weight:500;line-height:normal;gap:4px;display:flex;align-items:center}.variant-picker .variant-option__legend .variant-option__name{color:var(--black-50)}.variant-picker .variant-option__legend .variant-option__selected-value{color:var(--black)}.variant-picker .variant-option__button-label--material{width:56px;height:44px;min-width:56px;min-height:44px;flex-basis:44px}}@media screen and (max-width:989px){.material-option-popover{display:none!important}}@media screen and (min-width:750px){.material-option-modal__dialog{top:0;right:0;bottom:0;left:auto;width:min(100vw,480px);max-width:min(100vw,480px);height:100dvh;max-height:100dvh;transform:translate(100%)}.material-option-modal.is-open .material-option-modal__dialog{transform:translate(0)}.material-option-modal__body{padding:24px}.material-option-modal__main .material-option-template__image{aspect-ratio:408 / 262}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/variant-picker-custom.css.map */