/* ==========================================================================
   Metaly for ACF and SCF – Quantity Field (WP/ACF look)
   ========================================================================== */

.metaly-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

/* Use ACF input wrap spacing */
.metaly-qty__input-wrap.acf-input-wrap {
    margin: 0;
}

/* Keep the input aligned with WP defaults */
.metaly-qty__input {
    width: 110px;
    max-width: 100%;
    height: 30px;
    /* WP-ish */
    line-height: 30px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 13px;
}

/* Let WP button styles drive the look */
.metaly-qty__btn.button {
    min-width: 34px;
    height: 30px;
    /* match WP input */
    line-height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Better symbol centering */
.metaly-qty__btn span {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

/* Avoid weird tiny buttons in narrow layouts */
@media (max-width: 480px) {
    .metaly-qty__input {
        width: 90px;
    }
}

.metaly-qty__input:disabled {
    background: #f6f7f7;
    color: #2c3338;
}