/* DN TANC — quantity selector, per Figma Dev Mode.
   Container (Frame 2131329794): 94×45, radius 100, border 1px #000, padding
   12/15, justify space-between → number on the left, chevron column on the
   right. Chevron column (Frame 2131330797): 16×21, 10px gap, vertical. Each
   arrow (Arrow Down): 9.5×5.5, #000.
   SCOPED to the product add-to-cart form (`form.cart`) AND the Blocksy sticky
   add-to-cart bar (`.ct-floating-bar`) via :is() — so the cart drawer / mini-
   cart (which is in neither) keeps its own −/+ style. Blocksy's `.ct-increase`
   / `.ct-decrease` keep their click behaviour; we only restyle. */

:is(form.cart, .ct-floating-bar) .quantity {
    position: relative;
    box-sizing: border-box;
    width: 94px;
    height: 45px;
    align-self: center;                 /* keep 45px even if the row stretches */
    border: 1px solid #000;
    border-radius: 100px;
    background: #fff;
}

/* Number: left-aligned, borderless, native browser spinner hidden. */
:is(form.cart, .ct-floating-bar) .quantity input.qty,
:is(form.cart, .ct-floating-bar) .quantity input.input-text.qty {
    -moz-appearance: textfield;
    appearance: textfield;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f0f0f;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: center;                 /* number centred, per Figma (not hard-left) */
    padding: 0 24px 0 0;                /* reserve the chevron column on the right */
}

:is(form.cart, .ct-floating-bar) .quantity input.qty::-webkit-outer-spin-button,
:is(form.cart, .ct-floating-bar) .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Match the Add-to-cart button to the 45px quantity box so the row is aligned
   on every product page (the gift-card widget already does; Blocksy's single-
   product button carries --theme-button-min-height:55px, which we override). */
:is(form.cart, .ct-floating-bar) .single_add_to_cart_button,
.ct-floating-bar-actions .button {
    --theme-button-min-height: 45px;
    min-height: 45px !important;
}

/* Below Blocksy's own floating-bar breakpoint the bar drops the quantity box and
   collapses that button into a round icon button, pinned to 40px wide
   (min-width/max-width). There is no 45px row left to line up with, and forcing
   45px tall on a 40px-wide button turned the circle into an oval. Hand the
   height back so it stays square. */
@media (max-width: 689.98px) {
    .ct-floating-bar-actions .button {
        --theme-button-min-height: 40px;
        min-height: 40px !important;
    }
}

/* Chevron column: two 9.5×5.5 #000 chevrons, 10px gap, vertically centred,
   15px from the right edge. Each span is a taller click target than the glyph. */
:is(form.cart, .ct-floating-bar) .quantity .ct-increase,
:is(form.cart, .ct-floating-bar) .quantity .ct-decrease {
    position: absolute !important;
    left: auto !important;
    right: 15px !important;
    width: 16px !important;
    height: 10.5px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: 9.5px 5.5px !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

:is(form.cart, .ct-floating-bar) .quantity .ct-increase::before,
:is(form.cart, .ct-floating-bar) .quantity .ct-increase::after,
:is(form.cart, .ct-floating-bar) .quantity .ct-decrease::before,
:is(form.cart, .ct-floating-bar) .quantity .ct-decrease::after {
    content: none !important;
    border: 0 !important;
    background: none !important;
}

:is(form.cart, .ct-floating-bar) .quantity .ct-increase {
    top: calc(50% - 10.5px) !important;
    bottom: auto !important;
    background-position: center top !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 5.5'%3E%3Cpath d='M1 4.3 4.75 1.2 8.5 4.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

:is(form.cart, .ct-floating-bar) .quantity .ct-decrease {
    top: 50% !important;
    bottom: auto !important;
    background-position: center bottom !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 5.5'%3E%3Cpath d='M1 1.2 4.75 4.3 8.5 1.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}