/* Licence stepper (merchant-licences). Size comes from the element's control. */
.m-ls { --m-ls-size: 52px; display: inline-flex; align-items: center; border-radius: var(--r-pill); }
.m-ls--dark { background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 2px var(--c-ink-strong); color: var(--c-surface); }
.m-ls--light { background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-border-soft); color: var(--c-ink); }
/* inline-flex + padding 0: the site's global button styles otherwise push the glyph to the left edge. */
.m-ls-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--m-ls-size); height: var(--m-ls-size); padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: inherit; font-size: calc(var(--m-ls-size) * 0.45); line-height: 1; cursor: pointer; }
.m-ls-btn:focus-visible, .m-ls-count:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.m-ls-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* padding 0 + min-width: the site's global input padding otherwise clips "99" in the bar's 48px stepper. */
.m-ls-count { flex: none; box-sizing: content-box; width: calc(var(--m-ls-size) * 0.9); min-width: 2.2ch; height: var(--m-ls-size); padding: 0; border: 0; border-radius: 0; background: none; color: inherit; text-align: center; font-family: var(--font-heading); font-size: calc(var(--m-ls-size) * 0.45); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: none; }