quantity-picker{--accent:#10b981;--qp-height:36px;--qp-font-size:1rem;--qp-btn-width:36px;--qp-bg:#18181b;height:var(--qp-height);line-height:var(--qp-height);font-size:var(--qp-font-size);color:#fff;background:var(--qp-bg)padding-box;border-radius:6px;outline:1px solid #ffffff1a;align-items:center;gap:0;transition:translate .12s ease-out;display:inline-flex;position:relative;scale:1;box-shadow:0 2px 10px -2px #00000080}quantity-picker:active{translate:0 1px}quantity-picker:after{content:"";pointer-events:none;z-index:20;border-radius:inherit;opacity:0;border:1px solid #f33;position:absolute;inset:-1px}quantity-picker:has(input:invalid:not(:focus-visible)):not(:focus-within){background:#ff000024;animation:.42s ease-out shake}quantity-picker:has(input:invalid:not(:focus-visible)):not(:focus-within):after{opacity:1}quantity-picker:has(input:valid):after{opacity:0}quantity-picker .track-container{box-sizing:border-box;height:100%;height:var(--qp-height);flex:1;line-height:1lh;position:relative;overflow:hidden}quantity-picker .track{box-sizing:border-box;translate:0 calc(var(--translate-x,0)*1lh);word-break:break-all;white-space:break-spaces;text-align:center;pointer-events:none;width:100%;line-height:1lh;transition:translate .26s ease-out;display:block;position:absolute;top:0;left:0}.track:before{content:attr(data-low-range-out);bottom:100%}.track:after{content:attr(data-high-range-out);top:100%}.track:before,.track:after{background:var(--qp-bg);opacity:1;width:100%;height:1lh;position:absolute;left:0}quantity-picker input:is(:invalid,:focus-visible)+.track{opacity:0;transition-duration:0s}quantity-picker button{height:100%;width:var(--qp-btn-width);box-sizing:border-box;color:inherit;font-size:inherit;cursor:pointer;z-index:10;outline-color:var(--accent);background:0 0;border:0;place-items:center;padding:0;transition:opacity .2s;display:grid;position:relative}quantity-picker button:focus-visible{outline:1px solid var(--accent)}quantity-picker button svg{stroke-width:2.5px;width:1em;height:1em}quantity-picker button.decrement,quantity-picker button.decrement:after{border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}quantity-picker button.increment,quantity-picker button.increment:after{border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}quantity-picker button:after{content:"";opacity:0;background:color-mix(in hsl,currentColor,#0000 80%);transition:opacity .16s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}quantity-picker button:is(:hover,:focus-visible):after{opacity:.4}quantity-picker button:disabled:after{opacity:0}quantity-picker button:active:not(:disabled):after{opacity:1}quantity-picker button:disabled{opacity:.2;cursor:not-allowed}quantity-picker .track,quantity-picker input{font-family:inherit;line-height:var(--qp-height);font-size:var(--qp-font-size);border:0;border-radius:0;position:absolute}quantity-picker input{box-sizing:border-box;appearance:none;text-align:center;color:inherit;font-size:inherit;opacity:0;caret-color:var(--accent);caret-shape:underscore;-moz-appearance:textfield;background:0 0;border:none;border-radius:0;outline-color:#0000;margin:0;padding:0;position:absolute;inset:0}quantity-picker input::selection{background:var(--accent);color:#fff}quantity-picker input:focus-visible{opacity:1;background:color-mix(in hsl,currentColor,#0000 95%);outline:none}quantity-picker input:invalid{opacity:1}quantity-picker input::-webkit-inner-spin-button{appearance:none;margin:0}quantity-picker input::-webkit-outer-spin-button{appearance:none;margin:0}@keyframes shake{0%,to{transform:translate(0)}20%,40%,60%,80%{transform:translate(-2%)}10%,30%,50%,70%,90%{transform:translate(2%)}}