@layer components{.qty{display:grid;grid-template-columns:28px 42px 28px;align-items:center;gap:var(--space-1);width:112px;height:32px;padding:var(--space-0-25);border:.5px solid rgb(var(--rgb-line) / .18);border-radius:var(--radius-sm);background:var(--c-surface)} .qty:focus-within{border-color:rgb(var(--rgb-primary) / .24);background:rgb(var(--rgb-surface) / .82)} .qty button{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-xs);color:var(--n-58);transition:color var(--time-fast) ease,background var(--time-fast) ease} .qty button:hover{color:var(--c-blue);background:var(--c-blue-06)} .qty button svg{width:var(--icon-xs);height:var(--icon-xs)} .qty input{width:42px;height:26px;border:0;border-radius:var(--radius-xs);background:rgb(var(--rgb-surface-soft) / .72);color:var(--n-54);text-align:center;font-size:var(--text-xs);font-weight:var(--w-medium);font-variant-numeric:tabular-nums;appearance:textfield} .qty input:focus,.qty input:focus-visible{outline:0!important;box-shadow:none!important;color:var(--c-primary)!important;background:var(--c-surface)} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{appearance:none;margin:0} .icon-btn,.icon-btn.ghost,.icon-btn.remove{position:relative;display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border:.5px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--c-blue);box-shadow:none;opacity:.92;transition:color var(--time-fast) ease,border-color var(--time-fast) ease,background var(--time-fast) ease,transform var(--time-fast) ease,opacity var(--time-fast) ease} .icon-btn.remove{color:var(--c-red)} .icon-btn[hidden]{display:none!important} .icon-btn:hover,.icon-btn.ghost:hover{color:var(--c-blue);border-color:var(--c-blue-16);background:var(--c-blue-04);scale:var(--button-hover-scale);opacity:1} .icon-btn.remove:hover,.icon-btn.remove:focus-visible{color:var(--c-surface)!important;background:var(--c-danger)!important;border-color:var(--c-danger)!important;scale:var(--button-hover-scale)} .icon-btn svg,.icon-btn.remove svg,.icon-btn.ghost svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;overflow:visible} .icon-btn::after{content:attr(aria-label);position:absolute;right:50%;top:calc(100% + 7px);z-index:25;padding:var(--space-1-25) var(--space-1-75);border:.5px solid var(--line-08);border-radius:var(--radius-xs);background:rgb(var(--rgb-surface) / .96);color:var(--n-70);box-shadow:var(--shadow-sm);font-size:var(--text-2xs);font-weight:var(--w-medium);line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(50%,-3px) scale(.98);transition:opacity var(--time-fast) ease,transform var(--time-fast) var(--ease-out)} .icon-btn:hover::after,.icon-btn:focus-visible::after{opacity:1;transform:translate(50%,0) scale(1)} .icon-btn.hint-up::after,.icon-btn[data-hint-flow="up"]::after{top:auto!important;bottom:calc(100% + 7px)!important;transform:translate(50%,3px) scale(.98)!important} .icon-btn.hint-up:hover::after,.icon-btn.hint-up:focus-visible::after,.icon-btn[data-hint-flow="up"]:hover::after,.icon-btn[data-hint-flow="up"]:focus-visible::after{transform:translate(50%,0) scale(1)!important}}