/* ══════════════════════════════════════════════════════════════
   QUANTITY STEPPER — one component, every surface (v9.26.0)
   ──────────────────────────────────────────────────────────────
   The storefront had TWO steppers. The product page used a pill
   capsule with round buttons; the Ads-Campaign order form used a
   flat segmented bar with square buttons. Same control, same job,
   two unrelated designs — so a buyer who arrived from an ad met a
   different widget than a buyer who browsed the catalogue, and any
   future change had to be made twice or drift.

   Declared here once and loaded by both. `.pdp-qty-*` and
   `.adl-qty-*` remain as the markup hooks their own JavaScript
   already binds to — the classes are an alias list on these rules,
   not a second implementation. Nothing else in either page changes.

   ── On the radius ────────────────────────────────────────────
   The buttons stay circular rather than following --btn-radius.
   This is the same call made in v9.23.2 for the header count
   bubbles and the slider dots: roundness here is not a style
   preference, it is what makes a 38px tap target read as a
   +/− control rather than a button with a label. The FIELD the
   stepper wraps still follows --field-radius, so the merchant's
   setting is respected exactly where it applies.
   ══════════════════════════════════════════════════════════════ */

.pdp-qty-selector,
.adl-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    height: 48px;
    padding: 4px;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-pill);
    background: var(--clr-surface-2);
}

.pdp-qty-btn,
.adl-qty-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--clr-surface);
    color: var(--clr-text-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition), transform .15s;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.pdp-qty-btn:hover,
.adl-qty-btn:hover {
    background: var(--clr-primary);
    color: #fff;
}

.pdp-qty-btn:active,
.adl-qty-btn:active { transform: scale(.92); }

/* A stepper at its limit must SAY so. Both pages clamp the value
   (stock on the product page, ads_config max_qty on the landing
   page); without this the button still looked live and the buyer
   clicked a control that silently did nothing. */
.pdp-qty-btn:disabled,
.adl-qty-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    box-shadow: none;
}
.pdp-qty-btn:disabled:hover,
.adl-qty-btn:disabled:hover {
    background: var(--clr-surface);
    color: var(--clr-text-2);
}

.pdp-qty-input,
.adl-qty input {
    width: 50px;
    height: 38px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-main);
    color: var(--clr-text);
    background: transparent;
    outline: none;
    /* Hide the browser's own spinners — the buttons are the control. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button,
.adl-qty input::-webkit-outer-spin-button,
.adl-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-qty-btn,
    .adl-qty-btn { transition: none; }
    .pdp-qty-btn:active,
    .adl-qty-btn:active { transform: none; }
}