/**
 * SpeedPin quantity presets (1 / 3).
 *
 * Pairs with includes/speedpin-packs.php and assets/js/qty-presets.js.
 * Visual language mirrors the variation pills in
 * uploads/windpress/data/woocommerce/_product.css (48px, 2px border,
 * Barlow Condensed). Active state is the brand red rather than the pills'
 * charcoal so the two controls read as different questions on the Locking
 * pin, where both appear in the same form.
 */

/* form.cart is an `auto 1fr 1fr` grid on simple products and a flex-wrap
   row inside .woocommerce-variation-add-to-cart on variable ones. Take the
   full row in both. */
.brxe-product-add-to-cart form.cart > .pu-qty-presets {
    grid-column: 1 / -1;
}

.brxe-product-add-to-cart .woocommerce-variation-add-to-cart .pu-qty-presets {
    flex: 0 0 100%;
}

.pu-qty-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.pu-qty-presets__label {
    flex: 0 0 100%;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500, #737373);
}

/* !important + body-scope is load-bearing: `body.single-product form.cart
   button { color: #fff !important }` in _product.css would otherwise paint
   these white-on-white. Same fight the variation pills have. */
body.single-product form.cart button.pu-qty-presets__btn,
body.single-product form.cart a.pu-qty-presets__btn,
.pu-qty-presets__btn {
    flex: 1 1 96px;
    min-width: 96px;
    height: 48px;
    padding: 0 1rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-charcoal, #2D2D2D) !important;
    -webkit-text-fill-color: var(--color-charcoal, #2D2D2D) !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 2px solid var(--color-gray-300, #d1d1d1) !important;
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pu-qty-presets__btn small {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-500, #737373);
    -webkit-text-fill-color: var(--color-gray-500, #737373);
    white-space: nowrap;
}

/* Pack links carry a price in <small>, which WC wraps in its own spans. */
.pu-qty-presets__btn small .woocommerce-Price-amount,
.pu-qty-presets__btn small .amount {
    font: inherit;
    color: inherit;
}
.pu-qty-presets__btn small del { display: none; }
.pu-qty-presets__btn small ins { text-decoration: none; }

body.single-product form.cart button.pu-qty-presets__btn:hover,
body.single-product form.cart a.pu-qty-presets__btn:hover,
.pu-qty-presets__btn:hover {
    border-color: var(--color-charcoal, #2D2D2D) !important;
}

body.single-product form.cart button.pu-qty-presets__btn:focus-visible,
body.single-product form.cart a.pu-qty-presets__btn:focus-visible,
.pu-qty-presets__btn:focus-visible {
    outline: none;
    border-color: #DA291C !important;
    box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.18);
}

body.single-product form.cart button.pu-qty-presets__btn.is-active,
.pu-qty-presets__btn.is-active {
    color: #DA291C !important;
    -webkit-text-fill-color: #DA291C !important;
    border-color: #DA291C !important;
    background: #fff !important;
    background-color: #fff !important;
}

.pu-qty-presets__btn.is-active small {
    color: #DA291C;
    -webkit-text-fill-color: #DA291C;
}

.pu-qty-presets__total {
    flex: 0 0 100%;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--color-gray-500, #737373);
}