.pbn-paint-picker{--pbn-purple: #5319a7;--pbn-purple-soft: rgba(83, 25, 167, .055);--pbn-pink: #e1285a;--pbn-pink-hover: #c9224f;--pbn-text: #2e2932;--pbn-muted: #625b66;--pbn-border: #ddd7e2;--pbn-surface: #fff;--pbn-soft-surface: #f8f6fa;--pbn-shadow: 0 8px 24px rgba(46, 29, 62, .07);--pbn-inline-pad: clamp(16px, 3vw, 22px);margin:18px 0;padding:var(--pbn-inline-pad);color:var(--pbn-text);background:var(--pbn-surface);border:1px solid rgba(83,25,167,.13);border-radius:16px;box-shadow:var(--pbn-shadow);container-type:inline-size}.pbn-paint-picker,.pbn-paint-picker *{box-sizing:border-box}.pbn-paint-picker button,.pbn-paint-picker input{font:inherit}.pbn-paint-picker__heading h2,.pbn-paint-picker__set-intro h3,.pbn-paint-picker__set-code{margin:0;color:var(--pbn-text)}.pbn-paint-picker__heading h2{font-size:clamp(20px,4cqi,24px);line-height:1.2}.pbn-paint-picker__heading p,.pbn-paint-picker__set-intro p{margin:5px 0 0;color:var(--pbn-muted);font-size:13px;line-height:1.5}.pbn-paint-picker__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 20px;padding:4px;background:var(--pbn-soft-surface);border:1px solid var(--pbn-border);border-radius:12px}.pbn-paint-picker__tab{min-height:44px;padding:9px 12px;color:var(--pbn-muted);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}.pbn-paint-picker__tab:hover,.pbn-paint-picker__tab:focus-visible,.pbn-paint-picker__tab.is-active{color:var(--pbn-text)}.pbn-paint-picker__tab.is-active{color:var(--pbn-purple);background:var(--pbn-surface);border-color:#5319a72e;box-shadow:0 2px 7px #2e1d3e14}.pbn-paint-picker__panel[hidden]{display:none}.pbn-paint-picker__selection{margin-bottom:20px;padding:14px;background:var(--pbn-soft-surface);border:1px solid var(--pbn-border);border-radius:12px}.pbn-paint-picker__selection-head,.pbn-paint-picker__set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pbn-paint-picker__selection-head>div{display:grid;gap:2px}.pbn-paint-picker__selection-head span,.pbn-paint-picker__set-head p{color:var(--pbn-muted);font-size:12px}.pbn-paint-picker__running-price,.pbn-paint-picker__set-head>strong{white-space:nowrap;font-size:19px}.pbn-paint-picker__empty,.pbn-paint-picker__set-empty,.pbn-paint-picker__loading,.pbn-paint-picker__set-loading{margin:8px 0 0;color:var(--pbn-muted);font-size:13px}.pbn-paint-picker__selected-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;max-height:150px;margin-top:10px;padding-right:3px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.pbn-paint-picker__selected-grid[hidden]{display:none}.pbn-paint-picker__selected-item{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;padding:7px 0 0;background:transparent;border:0;border-top:1px solid var(--pbn-border);border-radius:0}.pbn-paint-picker__selected-swatch{width:18px;height:18px;border:1px solid rgba(0,0,0,.16);border-radius:4px}.pbn-paint-picker__selected-code{overflow:hidden;font-size:12px;font-weight:600;text-overflow:ellipsis}.pbn-paint-picker__quantity{display:flex;align-items:center;gap:3px}.pbn-paint-picker__quantity button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--pbn-text);background:var(--pbn-surface);border:1px solid var(--pbn-border);border-radius:5px;cursor:pointer}.pbn-paint-picker__quantity span{min-width:15px;text-align:center;font-size:12px}.pbn-paint-picker__clear{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:4px 0;color:var(--pbn-muted);background:transparent;border:0;cursor:pointer;font-size:12px;text-decoration:underline;text-underline-offset:2px}.pbn-paint-picker__label{display:block;margin-bottom:6px;font-size:13px;font-weight:600}.pbn-paint-picker__search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.pbn-paint-picker__input{width:100%;min-height:44px;padding:9px 11px;color:var(--pbn-text);background:var(--pbn-surface);border:1px solid var(--pbn-border);border-radius:10px;transition:border-color .16s ease,box-shadow .16s ease}.pbn-paint-picker__input:focus-visible,.pbn-paint-picker button:focus-visible{outline:3px solid rgba(83,25,167,.28);outline-offset:2px}.pbn-paint-picker__input:focus-visible{border-color:#5319a79e;box-shadow:0 0 0 1px #5319a71f}.pbn-paint-picker__secondary-button{min-height:44px;padding:8px 12px;color:var(--pbn-text);background:var(--pbn-surface);border:1px solid var(--pbn-border);border-radius:10px;cursor:pointer}.pbn-paint-picker__filters{margin:15px 0 0;padding:0;border-top:1px solid var(--pbn-border);border-bottom:1px solid var(--pbn-border)}.pbn-paint-picker__filters summary{min-height:44px;padding:12px 0;cursor:pointer;font-size:13px;font-weight:600}.pbn-paint-picker__filter-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 13px}.pbn-paint-picker__filter{display:inline-flex;flex:0 0 auto;align-items:center;gap:7px;min-height:44px;padding:7px 11px;color:var(--pbn-text);background:var(--pbn-surface);border:1px solid var(--pbn-border);border-radius:999px;cursor:pointer;font-size:12px;font-weight:600}.pbn-paint-picker__filter-dot{width:11px;height:11px;flex:0 0 11px;border:1px solid rgba(0,0,0,.12);border-radius:50%}.pbn-paint-picker__filter>span:last-child{color:var(--pbn-text)!important}.pbn-paint-picker__filter[aria-pressed=true]{color:#fff;background:var(--pbn-purple);border-color:var(--pbn-purple)}.pbn-paint-picker__filter[aria-pressed=true]>span:last-child{color:#fff!important}.pbn-paint-picker__filter[aria-pressed=true] .pbn-paint-picker__filter-dot{border-color:#ffffff9e}.pbn-paint-picker__result-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 0 9px;color:var(--pbn-muted);font-size:11px}.pbn-paint-picker .pbn-paint-picker__result-line>span{color:var(--pbn-muted)!important}.pbn-paint-picker__color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px;max-height:clamp(310px,44vh,410px);padding:4px 8px 8px 4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.pbn-paint-picker__color-grid[hidden]{display:none}.pbn-paint-picker__swatch{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:4px;border:2px solid transparent;border-radius:9px;cursor:pointer;font-size:11px;font-weight:700;text-shadow:none}.pbn-paint-picker__swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 3px var(--pbn-purple)}.pbn-paint-picker__action-row{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px calc(-1 * var(--pbn-inline-pad)) calc(-1 * var(--pbn-inline-pad));padding:13px var(--pbn-inline-pad);background:#fffffff5;border-top:1px solid var(--pbn-border)}.pbn-paint-picker__action-row>span{display:grid;gap:1px;color:var(--pbn-muted)!important;font-size:11px}.pbn-paint-picker__action-row strong{color:var(--pbn-text)!important;font-size:19px;line-height:1.2}.pbn-paint-picker__atc{min-height:46px;padding:11px 18px;color:#fff!important;background:var(--pbn-pink)!important;border:0;border-radius:10px;cursor:pointer;font-weight:600}.pbn-paint-picker__atc:hover:not(:disabled){background:var(--pbn-pink-hover)!important}.pbn-paint-picker__atc:disabled{color:#777!important;background:#dedde0!important;cursor:not-allowed}.pbn-paint-picker__atc--block{width:100%}.pbn-paint-picker__set-intro{margin-bottom:14px}.pbn-paint-picker__combobox{position:static}.pbn-paint-picker__suggestions{position:static;max-height:200px;margin-top:4px;padding:4px;overflow-y:auto;overscroll-behavior:contain;background:var(--pbn-surface);border:1px solid var(--pbn-border);border-radius:8px;box-shadow:0 4px 12px #2a1f3214}.pbn-paint-picker__suggestion{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:8px 10px;color:var(--pbn-text);background:transparent;border:0;border-radius:6px;cursor:pointer;text-align:left}.pbn-paint-picker__suggestion:hover,.pbn-paint-picker__suggestion:focus-visible,.pbn-paint-picker__suggestion[aria-selected=true]{background:var(--pbn-purple-soft)}.pbn-paint-picker__suggestion span{color:var(--pbn-muted);font-size:11px}.pbn-paint-picker__help{margin:7px 0 14px;color:var(--pbn-muted);font-size:11px;line-height:1.45}.pbn-paint-picker__set-result{padding:14px;background:var(--pbn-soft-surface);border:1px solid var(--pbn-border);border-radius:12px}.pbn-paint-picker__set-result[hidden],.pbn-paint-picker__set-empty[hidden],.pbn-paint-picker__set-loading[hidden]{display:none}.pbn-paint-picker__set-head{margin-bottom:12px}.pbn-paint-picker__set-code{display:block;font-size:18px}.pbn-paint-picker__set-head p{margin:3px 0 0}.pbn-paint-picker__set-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px;max-height:260px;padding:3px 7px 6px 3px;overflow-y:auto;overscroll-behavior:contain}.pbn-paint-picker__set-swatch{display:flex;align-items:center;justify-content:center;min-height:46px;padding:4px;border:1px solid var(--pbn-border);border-radius:7px;font-size:10px;font-weight:700;text-shadow:none}.pbn-paint-picker__status{margin:10px 0 0;color:var(--pbn-muted);font-size:12px}.pbn-paint-picker__status:empty,.pbn-paint-picker__status[hidden]{display:none}.pbn-paint-picker__status.is-error{color:#a51d18}.pbn-paint-code-guide{display:grid;gap:20px;margin-top:24px;padding:clamp(20px,4vw,32px);overflow:hidden;border:1px solid var(--pbn-border);border-radius:12px;background:#fff}.pbn-paint-code-guide__copy{align-self:center}.pbn-paint-code-guide__eyebrow{margin:0 0 7px;color:var(--pbn-purple);font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.pbn-paint-code-guide h2{margin:0 0 14px;color:var(--pbn-text);font-size:clamp(20px,3vw,26px);line-height:1.15}.pbn-paint-code-guide__copy>p:not(.pbn-paint-code-guide__eyebrow){margin:0 0 12px;color:var(--pbn-muted);font-size:14px;line-height:1.55}.pbn-paint-code-guide__copy>p:last-child{margin-bottom:0}.pbn-paint-code-guide__note{padding-top:12px;border-top:1px solid var(--pbn-border)}.pbn-paint-code-guide__image{align-self:center}.pbn-paint-code-guide__image img{display:block;width:100%;height:auto;border-radius:9px}@media(min-width:640px){.pbn-paint-code-guide{grid-template-columns:minmax(0,1.35fr) minmax(180px,.85fr);align-items:center}}@container (max-width: 480px){.pbn-paint-picker__selected-grid{grid-template-columns:1fr}.pbn-paint-picker__filter-row{flex-wrap:nowrap;padding-bottom:10px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.pbn-paint-picker__filter-row::-webkit-scrollbar{display:none}.pbn-paint-picker__color-grid,.pbn-paint-picker__set-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:480px){.pbn-paint-picker{padding:14px}.pbn-paint-picker__tabs{gap:0}.pbn-paint-picker__tab{flex:1 1 50%;padding-inline:7px;font-size:12px}.pbn-paint-picker__selected-grid{grid-template-columns:1fr}.pbn-paint-picker__color-grid,.pbn-paint-picker__set-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}.pbn-paint-picker__color-grid{max-height:clamp(290px,48vh,380px)}.pbn-paint-picker__action-row{margin:10px -14px -14px;padding-inline:14px}.pbn-paint-picker__atc{padding-inline:12px;font-size:12px}}@media(max-width:350px){.pbn-paint-picker__selected-grid,.pbn-paint-picker__color-grid,.pbn-paint-picker__set-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.pbn-paint-picker__selected-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.pbn-paint-picker *,.pbn-paint-picker *:before,.pbn-paint-picker *:after{scroll-behavior:auto!important;transition:none!important}}.pbn-paint-help{max-width:980px;margin:24px auto 0;padding:22px;border:1px solid var(--pbn-border);border-radius:14px;background:var(--pbn-surface)}.pbn-paint-help__eyebrow{margin:0 0 4px;color:var(--pbn-accent);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.pbn-paint-help h2{margin:0 0 14px;font-size:clamp(19px,2vw,24px)}.pbn-paint-help__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pbn-paint-help__links a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;min-width:0;min-height:108px;padding:16px 42px 15px 16px;color:var(--pbn-text);text-decoration:none;border:1px solid rgba(91,51,157,.28);border-left:3px solid var(--pbn-accent);border-radius:10px;background:#fcfaff;box-shadow:0 1px 2px #2514410d;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.pbn-paint-help__links a:after{content:"\2192";position:absolute;top:16px;right:15px;color:var(--pbn-accent);font-size:20px;font-weight:700;line-height:1}.pbn-paint-help__links a:hover,.pbn-paint-help__links a:focus-visible{border-color:var(--pbn-accent);background:#fff;box-shadow:0 5px 14px #391d6321;transform:translateY(-2px)}.pbn-paint-help__links a:focus-visible{outline:3px solid rgba(91,51,157,.24);outline-offset:2px}.pbn-paint-help__links strong{align-self:end;color:var(--pbn-text);font-size:16px;line-height:1.25}.pbn-paint-help__links span{grid-column:1;color:var(--pbn-accent);font-size:13px;font-weight:700;line-height:1.35;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}@media(max-width:700px){.pbn-paint-help{padding:18px 14px}.pbn-paint-help__links{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.pbn-paint-help__links a{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/69/assets/pbn-paint-picker.css.map */