.color-picker-button,.confirm-color-button{background-color:var(--color-accent);color:#fff;font-size:.85rem;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .1s ease;display:inline-flex;align-items:center;justify-content:center;padding:6px 18px;height:34px;border-radius:var(--button-border-radius, 999px);font-weight:var(--font-body-medium-weight, 500);margin:0 4px 8px 0;line-height:1;border:none;box-shadow:0 2px 6px #00000014}.color-picker-button:hover,.confirm-color-button:hover{background-color:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 10px #0000001f}.reset-color-button{background-color:#f3f3f3;color:#333;font-size:.85rem;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .1s ease;display:inline-flex;align-items:center;justify-content:center;padding:6px 18px;height:34px;border-radius:var(--button-border-radius, 999px);font-weight:var(--font-body-medium-weight, 500);margin:0 8px 8px 0;line-height:1;border:1px solid #ddd}.reset-color-button:hover{background-color:#e7e7e7;transform:translateY(-1px);box-shadow:0 3px 8px #00000014}.selected-color-display{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.95rem}.color-circle{width:18px;height:18px;border-radius:50%;border:1px solid #aaa;display:inline-block}body.fh-colorpicker-open{overflow:hidden;touch-action:none}.color-picker-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:#00000073;display:flex;justify-content:center;align-items:flex-start;padding:.75rem;box-sizing:border-box;overscroll-behavior:contain}.color-picker-modal.hidden{display:none}.color-picker-modal-content{background:#fff;width:100%;max-width:100%;border-radius:16px;display:flex;flex-direction:column;gap:.8rem;box-shadow:0 18px 50px #0000002e;box-sizing:border-box;padding:1rem 1.4rem 0;margin:calc(var(--fh-color-picker-offset, 160px)) auto 0;height:calc(100dvh - var(--fh-color-picker-offset, 160px) - 1.5rem);max-height:calc(100dvh - var(--fh-color-picker-offset, 160px) - 1.5rem)}@media (max-width: 749px){.color-picker-modal{padding:0}.color-picker-modal-content{margin:0;border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:none;padding:1rem 1rem 0}}.header-container{display:flex;align-items:center;justify-content:space-between;column-gap:1rem;row-gap:.5rem;flex-wrap:nowrap;border-bottom:1px solid #eee;padding-bottom:.4rem}.header-container b{font-size:1rem}.header-right{display:flex;align-items:center;gap:.65rem}.search-container{position:relative;display:flex;align-items:center;gap:.5rem}input.color-search-input{width:180px;border:1px solid #ddd;border-radius:999px;font-size:.85rem;opacity:1;padding:.4rem .8rem;margin-bottom:0;transition:border-color .2s ease,box-shadow .2s ease}input.color-search-input:focus{outline:none;border-color:var(--color-accent, #222);box-shadow:0 0 0 2px #0000000d}.search-icon-button{background:#f5f5f5;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.4rem;border-radius:999px;transition:background .2s ease,box-shadow .2s ease,transform .1s ease,border-color .2s ease}.search-icon-button:hover{background:#ececec;border-color:#ccc;box-shadow:0 2px 6px #00000014;transform:translateY(-1px)}.modal-close-button{width:32px;height:32px;border-radius:999px;border:none;background:#f5f5f5;color:#333;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:background .2s ease,transform .1s ease,box-shadow .2s ease}.modal-close-button:hover{background:#e0e0e0;transform:translateY(-1px);box-shadow:0 2px 6px #0000001f}.modal-body{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1.3fr);gap:1rem;min-height:0;padding-top:.6rem;padding-bottom:.6rem;overflow:hidden}.sidebar-panel{display:flex;flex-direction:column;gap:.8rem;min-height:0;height:100%}.tone-filter-block,.collection-block{border-radius:12px;border:1px solid #eee;padding:.7rem .8rem;background:#fafafa}.tone-filter-block{flex-shrink:0}.collection-block{display:flex;flex-direction:column;flex:1;min-height:0}.tone-filter-title,.collection-title{font-size:.85rem;font-weight:600;margin-bottom:.4rem}.tone-filter-row{display:flex;flex-wrap:wrap;gap:.35rem}.tone-family-filter{flex:1 1 calc(50% - 4px);text-align:center;border-radius:999px;border:1px solid transparent;background:#f5f5f5;font-size:.8rem;padding:6px 10px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .1s ease}.tone-family-filter:hover{background:#ececec;border-color:#ddd;transform:translateY(-1px)}.tone-family-filter.active{background:#222;color:#fff;border-color:#222}.collection-tabs{display:flex;flex-wrap:wrap;gap:.35rem;flex:1;overflow-y:auto;padding-right:4px;-webkit-overflow-scrolling:touch}.category-button{flex:1 1 100%;text-align:left;border-radius:999px;border:1px solid #ddd;background:#fff;font-size:.8rem;padding:6px 10px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .1s ease,box-shadow .18s ease}.category-button:hover{background:#f3f3f3;border-color:#ccc;transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.category-button.active{background:#222;color:#fff;border-color:#222}.tones-panel{display:flex;flex-direction:column;min-height:0}.tones-panel-header{font-size:.9rem;font-weight:600;margin-bottom:.3rem}.color-grid-scroll-wrapper{flex:1;min-height:0;overflow-y:auto;padding:.4rem .1rem 1.2rem;border-radius:12px;border:1px solid #eee;-webkit-overflow-scrolling:touch;box-sizing:border-box}.color-grid{display:grid;gap:.45rem;justify-items:center;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}.color-chip{width:100%;max-width:64px;aspect-ratio:1 / 1;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.color-chip:hover{transform:translateY(-1px) scale(1.03);border-color:#ddd;box-shadow:0 4px 10px #0000002e}.color-chip.selected{border-color:#222;box-shadow:0 0 0 2px #0000001f}.color-chip.unavailable{opacity:.35;cursor:not-allowed;position:relative}.color-chip.unavailable:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:repeating-linear-gradient(135deg,rgba(0,0,0,.18),rgba(0,0,0,.18) 2px,transparent 2px,transparent 4px);pointer-events:none}.preview-panel{display:flex;flex-direction:column;gap:.7rem;min-height:0}.preview-switch{display:inline-flex;gap:.5rem}.preview-tab{padding:6px 14px;border-radius:999px;border:1px solid #ccc;background:#f5f5f5;cursor:pointer;font-size:.85rem;transition:background .15s ease,color .15s ease,border-color .15s ease}.preview-tab.active{background:#222;color:#fff;border-color:#222}.preview-item.hidden{display:none!important}.preview-layout{display:flex;flex-direction:column;gap:.8rem;align-items:stretch;min-height:0;flex:1}.preview-item{flex:1;min-height:0}.image-preview-wrapper{position:relative;padding:10px;border-radius:12px;background:#fff;box-shadow:0 4px 12px #0000001f;overflow:hidden;width:100%;height:100%}.image-preview-wrapper img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:2;border-radius:10px}.wall-overlay{position:absolute;top:10px;right:10px;bottom:10px;left:10px;background:transparent;z-index:1;border-radius:10px;pointer-events:none;mix-blend-mode:normal!important;opacity:1}.tone-preview{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-radius:14px;background:#f8f8f8;box-shadow:inset 0 0 0 1px #00000008}.tone-preview-header{display:flex;flex-direction:column;gap:.15rem}.tone-preview-title{font-size:.9rem;font-weight:600}.tone-preview-subtitle{font-size:.78rem;color:#777}.tone-preview-box{width:100%;border-radius:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 20px #0000001f;background:#fff;flex:1}.expand-tone-button{margin-top:.3rem;align-self:flex-start;background:#fff;border-radius:999px;border:1px solid #ddd;font-size:.8rem;padding:.35rem .9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.expand-tone-button:hover{background:#f3f3f3;border-color:#ccc;transform:translateY(-1px);box-shadow:0 3px 8px #0000001a}.modal-footer-bar{margin-top:auto;padding:.9rem 1.4rem 1.1rem;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:#fafafa;min-height:64px;box-shadow:0 -2px 6px #0000000a}.color-info{font-size:.8rem;color:#555;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.modal-color-preview{width:18px;height:18px;border-radius:50%;border:1px solid #2C2D2E;display:inline-block}.color-unavailable-message{color:#c0342b;font-size:.8rem}.tone-fullscreen-popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;display:none;background:#fff;cursor:pointer;transition:opacity .15s ease}.tone-fullscreen-popup.visible{display:block;opacity:1}.tone-fullscreen-popup.hidden{display:none;opacity:0}.tone-fullscreen-close{position:absolute;top:18px;right:18px;width:42px;height:42px;background:#0000008c;color:#fff;border:none;border-radius:50%;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999999;transition:background .2s ease}.tone-fullscreen-close:hover{background:#000c}.mobile-tab-bar{display:none}.mobile-tab-button{border:none;background:#f5f5f5;border-radius:999px;padding:6px 10px;font-size:.8rem;cursor:pointer;flex:1 1 auto;text-align:center;white-space:nowrap;border:1px solid #ddd;transition:background .18s ease,border-color .18s ease,transform .1s ease}.mobile-tab-button:hover{background:#ececec;border-color:#ccc;transform:translateY(-1px)}.mobile-tab-button.active{background:#222;color:#fff;border-color:#222}@media (max-width: 1023px){.modal-body{grid-template-columns:1fr}.sidebar-panel{flex-direction:row;align-items:stretch}.tone-filter-block,.collection-block{flex:1 1 0}.color-grid{grid-template-columns:repeat(6,1fr)}.tone-preview-box{min-height:160px}.color-picker-modal-content{padding-inline:1rem}}@media (max-width: 749px){body.fh-colorpicker-open .header-section,body.fh-colorpicker-open .header{display:none!important}.color-picker-modal-content{margin:0;border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:none;padding:1rem 1rem 0}body.fh-colorpicker-open header,body.fh-colorpicker-open .shopify-section-header,body.fh-colorpicker-open .header-wrapper{display:none!important}.mobile-tab-bar{display:flex;gap:.4rem;margin-top:.6rem;margin-bottom:.5rem;overflow-x:auto;padding-bottom:.2rem}.modal-body{display:block;padding-top:.3rem;overflow:hidden}.sidebar-panel,.preview-panel{display:none}.tones-panel{display:block;height:calc(100vh - 230px)}.header-container{flex-direction:column;align-items:stretch}.header-right{width:100%;justify-content:space-between;margin-top:.4rem}.search-container{flex:1}.search-container .color-search-input{width:0;opacity:0;padding:0;border-width:0;pointer-events:none}.search-container .color-search-input.visible{width:100%;opacity:1;padding:.4rem .8rem;border-width:1px;pointer-events:auto;font-size:16px}.color-grid-scroll-wrapper{max-height:100%}}body.fh-colorpicker-open .header-section,body.fh-colorpicker-open .header,body.fh-colorpicker-open header,body.fh-colorpicker-open .shopify-section-header,body.fh-colorpicker-open .header-wrapper,body.fh-colorpicker-open .header--inner{display:none!important;visibility:hidden!important;opacity:0!important}.color-suggestions{position:absolute;top:110%;left:0;right:0;background:#fff;border-radius:10px;border:1px solid #e0e0e0;box-shadow:0 8px 20px #0000001f;z-index:100000;max-height:260px;overflow-y:auto;padding:4px 0}.color-suggestions.hidden{display:none}.color-suggestion-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:.82rem;transition:background .15s ease}.color-suggestion-item:hover{background:#f5f5f5}.color-suggestion-swatch{width:16px;height:16px;border-radius:999px;border:1px solid rgba(0,0,0,.18);flex-shrink:0}.color-suggestion-text-main{font-weight:500}.color-suggestion-text-sub{font-size:.74rem;color:#777}@media (max-width: 749px){.color-suggestions{max-height:50vh}}@media (min-width: 750px){.search-container .color-search-input{width:380px!important}}.color-search-input::placeholder{color:#888!important;opacity:1!important}.color-search-input::-webkit-input-placeholder{color:#888!important;opacity:1!important}.color-search-input::-moz-placeholder{color:#888!important;opacity:1!important}.color-search-input:-ms-input-placeholder{color:#888!important;opacity:1!important}.color-search-input:-moz-placeholder{color:#888!important;opacity:1!important}.clear-search-button{border:none;background:transparent;cursor:pointer;font-size:16px;line-height:1;padding:0 4px;opacity:.6;display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s ease,transform .1s ease}.clear-search-button:hover{opacity:1;transform:translateY(-1px)}.clear-search-button.hidden{display:none}@media (max-width: 749px){.sidebar-panel{height:calc(100vh - 230px);overflow:hidden}.collection-block{height:100%;display:flex;flex-direction:column;min-height:0}.collection-tabs{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}}@media (max-width: 749px){.collection-block{max-height:calc(100vh - 260px);overflow:hidden}.collection-tabs{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}}.fh-color-label{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}.fh-color-label-title{font-size:.9rem;font-weight:600}.form__label__color__value{display:block}.fh-selected-color-card{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:12px;background:#f8f8f8;border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 5px #0000000a}.fh-selected-color-main{display:flex;align-items:center;gap:8px}.fh-selected-color-name{font-size:.9rem;font-weight:600}.fh-selected-color-meta{font-size:.78rem;color:#777}.fh-color-helper-text{margin:0;font-size:.78rem;color:#777}.product-form__input .reset-color-button,.product-form__input .color-picker-button{margin-top:2px}.fh-selected-color-card,.fh-selected-color-card *{text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important}#selected-color-label-name{display:block;text-align:left!important}.fh-color-label,.fh-color-label *{text-align:left!important}.fh-color-label{display:flex;flex-direction:column;justify-content:flex-start!important;align-items:flex-start!important}.fh-selected-color-main{display:flex;align-items:center!important;gap:8px}.fh-selected-color-main .color-circle{margin-top:1px}
/*# sourceMappingURL=/cdn/shop/t/22/assets/color-picker.css.map */