[data-quantity]{position:relative;width:50%;max-width:11rem;padding:0;margin:0;border:0;vertical-align:-webkit-baseline-middle}[data-quantity] legend{display:none}[data-quantity] input{font-size:18px;height:4rem;padding:0 4rem;border-radius:2rem;border:0;background:#fff;color:#222;box-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);text-align:center;width:90%;box-sizing:border-box;font-weight:lighter}[data-quantity] input:focus{outline:0;box-shadow:0 5px 55px -10px rgba(0,0,0,.2),0 0 4px #3fb0ff}[data-quantity] input[type=number]::-webkit-inner-spin-button,[data-quantity] input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[data-quantity] input[type=number]{-moz-appearance:textfield}[data-quantity] button{position:absolute;width:2.8rem;height:2.8rem;top:.6rem;display:block;padding:0;margin:0;border:0;background:#eeeeeebc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"><path d="M17 25h16M67 25h16M75 17v16" fill="none" stroke="rgb(59,69,66)" stroke-width="1.5px" stroke-linecap="round" stroke-linejoin="round" /></svg>') no-repeat 0 0;background-size:5.6rem 2.8rem;overflow:hidden;white-space:nowrap;text-indent:100%;border-radius:1.4rem;cursor:pointer;transition:opacity .15s;opacity:.5}[data-quantity] button:active{background-position-y:1px;box-shadow:inset 0 2px 12px -4px #c5d1d9}[data-quantity] button:focus{outline:0}[data-quantity] button:hover{opacity:1}[data-quantity] button.sub{left:1.6rem}[data-quantity] button.add{right:.6rem;background-position-x:-2.8rem}