.custom-color-variant-picker{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.custom-color-variant-picker--label{display:flex;align-items:center;gap:5px;flex-shrink:0}.custom-color-variant-picker--label-text{font-size:16px;font-weight:600;line-height:22px;color:var(--cu_dark)}.custom-color-variant-picker--label-value{font-size:16px;font-weight:400;line-height:22px;color:var(--cu_dark)}.custom-color-variant-picker--options{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.custom-color-variant-picker--option{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(0deg,#1c1c1c0d 0% 100%);border:1px solid var(--cu_grey);cursor:pointer;transition:border-color .2s ease;position:relative;overflow:hidden;text-decoration:none;outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent}.custom-color-variant-picker--option img{width:100%;height:100%;object-fit:cover;display:block}.custom-color-variant-picker--option:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,#1c1c1c0d 0% 100%);pointer-events:none;z-index:1}.custom-color-variant-picker--no-image{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:16px;font-weight:600;color:var(--cu_dark);text-transform:uppercase;background:var(--cu_light_grey)}.custom-color-variant-picker--option:hover{border-color:var(--cu_dark);z-index:1}.custom-color-variant-picker--option.is-active{border-color:var(--cu_dark);z-index:2}.custom-color-variant-picker--option.is-active:after{background:linear-gradient(0deg,#1c1c1c1a 0% 100%)}.custom-color-variant-picker--option:focus,.custom-color-variant-picker--option:focus-visible,.custom-color-variant-picker--option:active{outline:none;box-shadow:none}.custom-color-variant-picker--overflow{padding:0;font-family:inherit;border-radius:0}.custom-color-variant-picker--overflow:after{background:#1c1c1c99;z-index:2}.custom-color-variant-picker--overflow-text{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--cu_white);white-space:nowrap;pointer-events:none}.custom-color-variant-picker--sidebar{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;visibility:hidden;pointer-events:none}.custom-color-variant-picker--sidebar.is-open{visibility:visible;pointer-events:auto}.custom-color-variant-picker--sidebar-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#1c1c1c80;opacity:0;transition:opacity .3s ease}.custom-color-variant-picker--sidebar.is-open .custom-color-variant-picker--sidebar-backdrop{opacity:1}.custom-color-variant-picker--sidebar-content{position:absolute;top:0;right:0;bottom:0;width:100%;max-width:320px;background:var(--cu_white);transform:translate(100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow:hidden}.custom-color-variant-picker--sidebar.is-open .custom-color-variant-picker--sidebar-content{transform:translate(0)}.custom-color-variant-picker--sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--cu_grey);flex-shrink:0}.custom-color-variant-picker--sidebar-title{font-size:16px;font-weight:600;color:var(--cu_dark)}.custom-color-variant-picker--sidebar-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;cursor:pointer;color:var(--cu_dark);transition:opacity .2s ease}.custom-color-variant-picker--sidebar-close:hover{opacity:.7}.custom-color-variant-picker--sidebar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px;overflow-y:auto;flex:1;align-content:start}.custom-color-variant-picker--sidebar-option.custom-color-variant-picker--option{display:block;width:100%;height:0;padding-bottom:100%;position:relative}.custom-color-variant-picker--sidebar-option.custom-color-variant-picker--option img,.custom-color-variant-picker--sidebar-option.custom-color-variant-picker--option .custom-color-variant-picker--no-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}@media only screen and (max-width:767px){.custom-color-variant-picker{flex-direction:column;align-items:flex-start;gap:10px}.custom-color-variant-picker--sidebar-content{max-width:100%}}
/*# sourceMappingURL=/cdn/shop/t/30/assets/custom_color-variant-picker.css.map */