.product__info-variants-with-color-picker{display:flex;flex-direction:column;gap:var(--sp-4)}.swatch--rainbow{position:relative;display:block;width:min(74%,88px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#d52b1e,#f7c600,#59a638,#009ca6,#2454a6,#713b8f,#d52b1e);box-shadow:inset 0 0 0 5px #fff,0 0 0 1px rgb(var(--color-foreground) / .12)}.swatch--rainbow:after{position:absolute;top:28%;right:28%;bottom:28%;left:28%;border-radius:50%;background:#fff;content:""}.custom-color-picker{display:flex;min-width:0}.custom-color-picker [data-ral-bundle]{display:none!important}.custom-color-picker__opener{position:relative;display:flex;align-items:center;justify-content:center;width:var(--swatch-size, clamp(var(--sp-10), 3.368vw, var(--sp-16)));aspect-ratio:var(--aspect-ratio, 1);overflow:visible;border:1px solid rgb(var(--color-foreground) / .16);border-radius:5px;background:#fff;cursor:pointer;transition:border-color var(--animation-fast),box-shadow var(--animation-fast)}.custom-color-picker__opener img{width:100%;height:100%;object-fit:contain}.custom-color-picker__opener:hover{border-color:rgb(var(--color-foreground) / .55)}.custom-color-picker__opener.active{border-color:rgb(var(--color-foreground));box-shadow:inset 0 0 0 1px rgb(var(--color-foreground))}.custom-color-picker__opener.active:after{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid #fff;border-radius:4px;background:var(--selected-ral-color);box-shadow:0 0 0 1px rgb(var(--color-foreground) / .18);content:""}.custom-color-picker__opener:focus-visible,.custom-color-picker__filters button:focus-visible,.custom-color-picker__color:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:3px}.custom-color-picker--surface{display:inline-flex}.custom-color-picker--surface .custom-color-picker__opener{width:52px;height:52px}.system-configurator__variant-card--ral .custom-color-picker,.system-configurator__variant-card--ral .custom-color-picker__system-opener{width:100%;height:auto}.system-configurator__variant-card--ral .custom-color-picker__system-opener{flex:1 1 auto}.custom-color-picker__system-opener{display:grid;width:100%;aspect-ratio:auto;min-height:0;padding:var(--sp-3);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;align-items:stretch;justify-content:stretch;border:1px solid var(--config-border);border-radius:var(--config-card-radius);background:#fff;text-align:start}.custom-color-picker__system-opener:hover{border-color:rgb(var(--color-foreground) / .55)}.custom-color-picker__system-opener.active{border-color:rgb(var(--color-foreground));box-shadow:inset 0 0 0 1px rgb(var(--color-foreground))}.custom-color-picker__system-opener.active:before{position:absolute;z-index:3;inset-block-start:calc(var(--sp-3) + 6px);inset-inline-start:calc(var(--sp-3) + 5px);width:11px;height:6px;border-block-end:2px solid #fff;border-inline-start:2px solid #fff;content:"";transform:rotate(-45deg)}.custom-color-picker__system-opener.active:after{position:absolute;z-index:2;inset-block-start:var(--sp-3);inset-inline-start:var(--sp-3);width:22px;height:22px;border:0;border-radius:50%;background:rgb(var(--color-foreground));box-shadow:none;content:""}.custom-color-picker__system-media{background:#f7f7f7}.custom-color-picker__system-media .swatch--rainbow{width:min(68%,112px)}.custom-color-picker__drawer .drawer__inner{width:100%;max-width:36rem}.custom-color-picker__drawer-header{align-items:flex-start}.custom-color-picker__drawer-heading{display:grid;gap:var(--sp-2);max-width:520px}.custom-color-picker__drawer-heading p{color:rgb(var(--color-foreground) / .64);font-size:var(--text-sm);line-height:1.45}.custom-color-picker__drawer-scroll{gap:var(--sp-5)}.custom-color-picker__search{position:relative;flex:none}.custom-color-picker__search .input{width:100%;height:52px;min-height:52px;padding-block:0;padding-inline-start:48px;line-height:50px}.custom-color-picker__search>.icon{inset-inline-start:17px;top:50%;transform:translateY(-50%)}.custom-color-picker__filters{display:flex;flex:none;gap:8px;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:thin}.custom-color-picker__filters button{display:inline-flex;min-height:38px;padding:8px 13px;align-items:center;gap:7px;border:1px solid rgb(var(--color-foreground) / .2);border-radius:999px;background:#fff;color:rgb(var(--color-foreground) / .72);font-size:var(--text-sm);line-height:1;white-space:nowrap;transition:border-color var(--animation-fast),color var(--animation-fast),background-color var(--animation-fast)}.custom-color-picker__filters button:hover{border-color:rgb(var(--color-foreground) / .55);color:rgb(var(--color-foreground))}.custom-color-picker__filters button.is-active{border-color:rgb(var(--color-foreground));background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.custom-color-picker__filters i{width:12px;height:12px;border:1px solid rgb(var(--color-foreground) / .18);border-radius:50%;background:var(--filter-color)}.custom-color-picker__filters i.is-split{background:linear-gradient(90deg,#fff 0 50%,#171717 50% 100%)}.custom-color-picker__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.custom-color-picker__color{position:relative;display:grid;min-width:0;padding:8px;gap:10px;border:1px solid rgb(var(--color-foreground) / .16);border-radius:12px;background:#fff;text-align:start;transition:border-color var(--animation-fast),box-shadow var(--animation-fast)}.custom-color-picker__color:hover{border-color:rgb(var(--color-foreground) / .52)}.custom-color-picker__color.is-active{border-color:rgb(var(--color-foreground));box-shadow:inset 0 0 0 1px rgb(var(--color-foreground))}.custom-color-picker__color-swatch{display:block;width:100%;height:72px;border:1px solid rgb(var(--color-foreground) / .12);border-radius:8px}.custom-color-picker__color-copy{display:grid;min-width:0;gap:2px}.custom-color-picker__color-copy strong{font-size:var(--text-sm);font-weight:650;line-height:1.25}.custom-color-picker__color-copy>span{overflow:hidden;color:rgb(var(--color-foreground) / .62);font-size:var(--text-xs);line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.custom-color-picker__color>small{position:absolute;top:15px;right:15px;padding:5px 7px;border-radius:999px;background:#ffffffe6;color:#171717;font-size:10px;font-weight:650;line-height:1}.custom-color-picker__empty{padding:var(--sp-10) var(--sp-4);color:rgb(var(--color-foreground) / .62);text-align:center}.custom-color-picker__drawer-footer{display:grid;gap:var(--sp-3);flex:none;border-block-start:1px solid rgb(var(--color-border-light))}.custom-color-picker__selected{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px}.custom-color-picker__selected>span:last-child{display:grid;min-width:0;gap:2px}.custom-color-picker__selected small,.custom-color-picker__note{color:rgb(var(--color-foreground) / .58);font-size:var(--text-xs);line-height:1.4}.custom-color-picker__selected strong{overflow:hidden;font-size:var(--text-sm);line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.custom-color-picker__surcharge,.custom-color-picker__trigger-price{color:rgb(var(--color-foreground));font-size:var(--text-xs);font-weight:var(--font-medium);line-height:1.35}.custom-color-picker__trigger-price{margin-block-start:2px}.custom-color-picker__selected-swatch{display:block;width:42px;height:42px;border:1px dashed rgb(var(--color-foreground) / .28);border-radius:8px}.custom-color-picker__selected-swatch.has-color{border-style:solid}@media screen and (max-width:639px){.custom-color-picker__drawer .drawer__inner{width:100%}.custom-color-picker__drawer-heading p{display:none}.custom-color-picker__drawer-scroll{gap:var(--sp-4)}.custom-color-picker__color-swatch{height:58px}.custom-color-picker__system-opener{padding:var(--sp-2)}}@media screen and (max-width:390px){.custom-color-picker__list{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){.custom-color-picker__opener,.custom-color-picker__filters button,.custom-color-picker__color{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/custom-color-picker.css.map */