.color-selection{margin-bottom:1.2rem;width:100%;display:block}.color-selection .form__label{font-size:1.4rem}.color-selection__boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:1rem;margin-top:.8rem;width:100%;max-width:50rem;list-style:none;padding:0}.color-selection__box{display:flex;flex-direction:column;align-items:center;padding:0;background:transparent;border:none;cursor:pointer;transition:transform .2s ease;width:100%;min-width:0}.color-selection__box:hover{transform:scale(1.02)}.color-selection__box-inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:0;padding-bottom:115%;border-radius:var(--media-radius, .4rem);border:.1rem solid rgba(var(--color-foreground),.2);background:rgb(var(--color-background));transition:border-color .2s ease,box-shadow .2s ease;overflow:hidden;cursor:pointer}.color-selection__box:focus-visible .color-selection__box-inner,.color-selection__box:hover .color-selection__box-inner{border-color:rgb(var(--color-foreground))}.color-selection__box.is-active .color-selection__box-inner{border-color:rgb(var(--color-foreground));border-width:.2rem;box-shadow:0 0 0 .1rem rgb(var(--color-foreground))}.color-selection__box.is-filled .color-selection__box-inner{border-color:rgb(var(--color-foreground))}.color-selection__placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;height:auto;max-height:40%;transition:opacity .2s ease,visibility .2s ease;display:block;color:rgba(var(--color-foreground),.3);z-index:1}.color-selection__box.is-filled .color-selection__placeholder{opacity:0;visibility:hidden}.color-selection__box.is-active .color-selection__placeholder{color:rgb(var(--color-foreground))}.color-selection__image{position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:calc(var(--media-radius, .4rem) - .1rem);background-color:rgb(var(--color-background));opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:2;overflow:hidden}.color-selection__image img{width:100%;height:100%;object-fit:contain}.color-selection__box.is-filled .color-selection__image{opacity:1;visibility:visible}.color-selection__clear-btn{position:absolute;top:.2rem;left:.2rem;width:1.6rem;height:1.6rem;padding:.4rem;border-radius:50%;background:rgb(var(--color-foreground));border:none;cursor:pointer;z-index:10;opacity:0;visibility:hidden;transition:opacity .2s ease,background-color .2s ease;display:flex;align-items:center;justify-content:center}.color-selection__clear-btn .svg-wrapper{width:.8rem;height:.8rem;display:flex;align-items:center;justify-content:center}.color-selection__clear-btn svg{width:100%;height:100%;display:block}.color-selection__clear-btn svg path{fill:rgb(var(--color-background))}.color-selection__clear-btn:hover{opacity:.8}.color-selection__box.is-filled:not(.is-active) .color-selection__clear-btn{opacity:1;visibility:visible}.color-selection__label{display:block;width:100%;margin-top:.4rem;font-size:1rem;text-transform:uppercase;color:rgb(var(--color-foreground));line-height:1.2;text-align:center;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-selection__box.is-active .color-selection__label{font-weight:600}.color-selection__modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}.color-selection__modal[aria-hidden=false]{opacity:1;visibility:visible;pointer-events:auto}.color-selection__modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;cursor:pointer;z-index:-1}.color-selection__modal-content{position:relative;width:90%;max-width:90rem;max-height:85vh;margin:auto;background:rgb(var(--color-background));border-radius:var(--popup-corner-radius, .4rem);box-shadow:0 .4rem 2rem #0003;display:flex;flex-direction:column;transform:scale(.95);transition:transform .25s ease;overflow:hidden}.color-selection__modal[aria-hidden=false] .color-selection__modal-content{transform:scale(1)}.color-selection__modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:.1rem solid rgba(var(--color-foreground),.1)}.color-selection__modal-title{margin:0;font-size:1.6rem;font-weight:600;color:rgb(var(--color-foreground))}.color-selection__modal-close{width:4rem;height:4rem;padding:1rem;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center}.color-selection__modal-close:hover{background:rgba(var(--color-foreground),.05)}.color-selection__modal-close svg{width:1.2rem;height:1.2rem;display:block}.color-selection__modal-close svg path{fill:rgb(var(--color-foreground))}.color-selection__modal-body{padding:1.5rem 2rem 2rem;overflow-y:auto;flex:1}.color-selection__search{position:relative;margin-bottom:1.5rem}.color-selection__search-input{width:100%;height:4.5rem;padding:0 1.5rem 0 4.5rem;border:.1rem solid rgba(var(--color-foreground),.2);border-radius:var(--inputs-radius, 0);font-size:1.4rem;color:rgb(var(--color-foreground));background:rgb(var(--color-background));transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box}.color-selection__search-input:focus{outline:none;border-color:rgb(var(--color-foreground));box-shadow:0 0 0 .1rem rgb(var(--color-foreground))}.color-selection__search-input::placeholder{color:rgba(var(--color-foreground),.5)}.color-selection__search-icon{position:absolute;left:0;top:0;width:4.5rem;height:4.5rem;display:flex;align-items:center;justify-content:center;pointer-events:none;color:rgba(var(--color-foreground),.5)}.color-selection__search-icon svg{width:1.6rem;height:1.6rem}.color-selection__no-results{text-align:center;color:rgba(var(--color-foreground),.7);font-size:1.4rem;padding:3rem 0}.color-selection__no-results[hidden]{display:none}.color-selection__colors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.color-selection__color-item{display:flex;flex-direction:column;align-items:center;padding:0;background:transparent;border:none;cursor:pointer;transition:transform .15s ease}.color-selection__color-item:hover{transform:scale(1.05)}.color-selection__color-item[hidden]{display:none!important}.color-selection__color-image{width:100%;padding-bottom:100%;position:relative;border-radius:var(--media-radius, .4rem);overflow:hidden;border:.1rem solid rgba(var(--color-foreground),.1);transition:border-color .2s ease}.color-selection__color-item:hover .color-selection__color-image,.color-selection__color-item:focus-visible .color-selection__color-image{border-color:rgb(var(--color-foreground))}.color-selection__color-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.color-selection__color-name{margin-top:.5rem;font-size:1.1rem;text-transform:uppercase;color:rgb(var(--color-foreground));line-height:1.2;text-align:center;word-break:break-word}body.color-modal-open{overflow:hidden}@media screen and (max-width:749px){.color-selection__boxes,.color-selection__colors-grid{grid-template-columns:repeat(3,1fr);gap:.8rem}.color-selection__modal-content{width:95%;max-height:90vh}.color-selection__modal-header{padding:1.2rem 1.5rem}.color-selection__modal-body{padding:1.2rem 1.5rem 1.5rem}.color-selection__label{font-size:.9rem}}@media screen and (min-width:750px){.color-selection__boxes{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:1rem}.color-selection__box-inner{padding-bottom:120%}.color-selection__colors-grid{grid-template-columns:repeat(5,1fr);gap:1rem}.color-selection__label{font-size:1.1rem}.color-selection__color-name{font-size:1.2rem}}@media screen and (min-width:990px){.color-selection__colors-grid{grid-template-columns:repeat(6,1fr)}}
/*# sourceMappingURL=/cdn/shop/t/52/assets/component-color-selection.css.map */