/* Shared product, cart and WPC Fly Cart quantity controls. Keep product
 * selectors at their original specificity so its mobile purchase layout wins. */
.single-product .ff-single-product .ff-variation-wrapper .quantity,
.ffehbo-order-lists .quantity.ff-quantity-control,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) {
  --ffehbo-quantity-border: var(--ff-card-border, var(--e-global-color-border, var(--cmsmasters-colors-bd)));
  --ffehbo-quantity-background: var(--ff-card-bg, var(--e-global-color-background, var(--cmsmasters-colors-bg)));
  --ffehbo-quantity-foreground: var(--ff-heading, var(--e-global-color-secondary, var(--cmsmasters-colors-secondary)));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  float: none;
  min-height: 54px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--ff-card-border, var(--e-global-color-border, var(--cmsmasters-colors-bd)));
  border-radius: var(--ffehbo-button-radius);
  background: var(--ff-card-bg, var(--e-global-color-background, var(--cmsmasters-colors-bg)));
}

.single-product .ff-single-product .ff-variation-wrapper form.cart .quantity {
  margin: 0;
}

.single-product .ff-single-product .ff-variation-wrapper .quantity input.qty,
.ffehbo-order-lists .quantity.ff-quantity-control input.qty,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty {
  box-sizing: border-box;
  width: 52px;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ff-heading, var(--e-global-color-secondary, var(--cmsmasters-colors-secondary)));
  font-family: var(--ffehbo-font-family);
  font-size: var(--ffehbo-font-size-body);
  font-weight: inherit;
  line-height: var(--ffehbo-line-height-body);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.ffehbo-order-lists .quantity.ff-quantity-control input.qty,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty {
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.single-product .ff-single-product .ff-variation-wrapper .quantity input.qty::-webkit-inner-spin-button,
.single-product .ff-single-product .ff-variation-wrapper .quantity input.qty::-webkit-outer-spin-button,
.ffehbo-order-lists .quantity.ff-quantity-control input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty::-webkit-inner-spin-button,
.ffehbo-order-lists .quantity.ff-quantity-control input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty::-webkit-outer-spin-button,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty::-webkit-inner-spin-button,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.single-product .ff-single-product .ff-variation-wrapper .quantity :is(.qty-btn, .ff-quantity-control__button),
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button),
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button),
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button {
  --ffehbo-button-min-height: 48px;
  --ffehbo-button-padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: var(--ffehbo-button-radius);
  cursor: pointer;
}

body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button {
  height: 48px;
  line-height: var(--ffehbo-line-height-compact);
}

.single-product .ff-single-product .ff-variation-wrapper .quantity input.qty:focus-visible,
.ffehbo-order-lists .quantity.ff-quantity-control input.qty:focus-visible,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty:focus-visible,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty:focus-visible {
  outline: 2px solid var(--ff-heading, var(--e-global-color-secondary, var(--cmsmasters-colors-secondary)));
  outline-offset: -2px;
}

.single-product .ff-single-product .ff-variation-wrapper .quantity :is(.qty-btn, .ff-quantity-control__button)::before,
.single-product .ff-single-product .ff-variation-wrapper .quantity :is(.qty-btn, .ff-quantity-control__button):before,
.single-product .ff-single-product .ff-variation-wrapper .quantity :is(.qty-btn, .ff-quantity-control__button)::after,
.single-product .ff-single-product .ff-variation-wrapper .quantity :is(.qty-btn, .ff-quantity-control__button):after,
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button)::before,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button)::before,
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):before,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):before,
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button)::after,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button)::after,
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):after,
body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):after,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button::before,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:before,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button::after,
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* WPC already supplies the outer controls. Its nested WooCommerce quantity
 * wrapper must not draw a second frame or hide the native plus/minus buttons. */
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .quantity {
  display: contents;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Desktop shares the current product control; cart/Fly Cart keep two rounded ends. */
@media (min-width: 1024px) {
  .ffehbo-order-lists .quantity.ff-quantity-control,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) {
    align-items: stretch;
    width: 148px;
    height: 54px;
    min-height: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    --ffehbo-purchase-height: 54px;
  }

  .single-product .ff-single-product .ff-variation-wrapper :is(form.cart:not(.grouped_form), .woocommerce-variation-add-to-cart) > .quantity input.qty,
  .ffehbo-order-lists .quantity.ff-quantity-control input.qty,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty {
    flex: 1 1 52px;
    width: 52px;
    height: var(--ffehbo-purchase-height);
    border: 1px solid var(--ffehbo-quantity-border);
    border-radius: 0;
    background: var(--ffehbo-quantity-background);
  }

  .single-product .ff-single-product .ff-variation-wrapper :is(form.cart:not(.grouped_form), .woocommerce-variation-add-to-cart) > .quantity :is(.qty-btn, .ff-quantity-control__button),
  .ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button),
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button),
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button {
    --ffehbo-button-min-height: var(--ffehbo-purchase-height);
    --ffehbo-button-radius: 0;
    --ffehbo-button-background: color-mix(in srgb, var(--ffehbo-quantity-border) 45%, var(--ffehbo-quantity-background));
    --ffehbo-button-border: var(--ffehbo-quantity-border);
    flex: 0 0 48px;
    height: var(--ffehbo-purchase-height);
    margin: 0;
    border: 1px solid var(--ffehbo-quantity-border);
    border-inline-width: 0;
    border-radius: var(--ffehbo-button-radius);
    background: var(--ffehbo-button-background);
    color: var(--ffehbo-quantity-foreground);
    box-shadow: none;
  }

  .single-product .ff-single-product .ff-variation-wrapper :is(form.cart:not(.grouped_form), .woocommerce-variation-add-to-cart) > .quantity :is(.qty-btn, .ff-quantity-control__button):first-child,
  .ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):first-child,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):first-child,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:first-child {
    --ffehbo-button-radius: 999px 0 0 999px;
    border-left-width: 1px;
  }

  .single-product .ff-single-product .ff-variation-wrapper :is(form.cart:not(.grouped_form), .woocommerce-variation-add-to-cart) > .quantity :is(.qty-btn, .ff-quantity-control__button):last-child,
  .ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):last-child,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):last-child,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:last-child {
    border-right-width: 1px;
  }
  .ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):last-child,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):last-child,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:last-child {
    --ffehbo-button-radius: 0 999px 999px 0;
  }
}

@media (max-width: 767px) {
  .ffehbo-order-lists .quantity.ff-quantity-control,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) {
    height: 44px;
    min-height: 0;
    padding: 0;
  }

  .ffehbo-order-lists .quantity.ff-quantity-control input.qty,
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control input.qty,
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty {
    width: 40px;
    height: 20px;
    padding: 0;
    border-inline: 1px solid var(--e-global-color-border, var(--cmsmasters-colors-bd));
    font-size: var(--ffehbo-font-size-label);
  }

  .ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button),
  body.woocommerce-cart .woocommerce-cart-form .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button),
  body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button {
    --ffehbo-button-min-height: 42px;
    --ffehbo-button-radius: 0;
    --ffehbo-button-background: transparent;
    width: 40px;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* The narrow Fly Cart drawer uses a compact stepper at every breakpoint.
 * Keep native WPC handlers, fixed course quantities and input-only mode intact. */
body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) {
  --ffehbo-purchase-height: var(--ffehbo-pill-height);
  align-items: stretch;
  width: auto;
  height: var(--ffehbo-purchase-height);
  min-height: 0;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) input.qty {
  flex: 0 0 var(--ffehbo-pill-height);
  width: var(--ffehbo-pill-height);
  height: var(--ffehbo-purchase-height);
  padding: 0;
  border: 1px solid var(--ffehbo-quantity-border);
  background: var(--ffehbo-quantity-background);
  font-size: var(--ffehbo-font-size-label);
}

body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button {
  --ffehbo-button-min-height: var(--ffehbo-purchase-height);
  --ffehbo-button-icon-min-width: var(--ffehbo-pill-height);
  --ffehbo-button-radius: 0;
  --ffehbo-button-background: color-mix(in srgb, var(--ffehbo-quantity-border) 45%, var(--ffehbo-quantity-background));
  --ffehbo-button-border: var(--ffehbo-quantity-border);
  flex: 0 0 var(--ffehbo-pill-height);
  width: var(--ffehbo-pill-height);
  min-width: var(--ffehbo-pill-height);
  height: var(--ffehbo-purchase-height);
  min-height: var(--ffehbo-purchase-height);
  margin: 0;
  border: 1px solid var(--ffehbo-quantity-border);
  border-inline-width: 0;
  border-radius: var(--ffehbo-button-radius);
  background: var(--ffehbo-button-background);
  color: var(--ffehbo-quantity-foreground);
  box-shadow: none;
}

body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:first-child {
  --ffehbo-button-radius: 999px 0 0 999px;
  border-left-width: 1px;
}

body:not(.wp-admin) .woofc-area .woofc-area-mid .woofc-item .woofc-item-inner .woofc-item-qty .woofc-item-qty-inner:has(input.qty:not([type="hidden"])) .ff-quantity-control__button:last-child {
  --ffehbo-button-radius: 0 999px 999px 0;
  border-right-width: 1px;
}

/* Replenishment uses the product page's joined purchase control at a compact
 * height. Keep all quantity geometry here with the other shop controls. */
.ffehbo-order-lists .quantity.ff-quantity-control {
  --ffehbo-purchase-height: 44px;
  align-items: stretch;
  flex: 0 0 132px;
  width: 132px;
  height: var(--ffehbo-purchase-height);
  min-height: 0;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ffehbo-order-lists .quantity.ff-quantity-control input.qty {
  flex: 0 0 44px;
  width: 44px;
  height: var(--ffehbo-purchase-height);
  padding: 0;
  border: 1px solid var(--ffehbo-quantity-border);
  border-radius: 0;
  background: var(--ffehbo-quantity-background);
  font-size: var(--ffehbo-font-size-label);
}
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button) {
  --ffehbo-button-min-height: var(--ffehbo-purchase-height);
  --ffehbo-button-icon-min-width: 44px;
  --ffehbo-button-padding: 0;
  --ffehbo-button-radius: 0;
  --ffehbo-button-background: color-mix(in srgb, var(--ffehbo-quantity-border) 45%, var(--ffehbo-quantity-background));
  --ffehbo-button-border: var(--ffehbo-quantity-border);
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: var(--ffehbo-purchase-height);
  min-height: var(--ffehbo-purchase-height);
  margin: 0;
  border: 1px solid var(--ffehbo-quantity-border);
  border-inline-width: 0;
  border-radius: var(--ffehbo-button-radius);
  background: var(--ffehbo-button-background);
  color: var(--ffehbo-quantity-foreground);
  box-shadow: none;
}
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):first-child {
  --ffehbo-button-radius: 999px 0 0 999px;
  border-left-width: 1px;
}
.ffehbo-order-lists .quantity.ff-quantity-control :is(.qty-btn, .ff-quantity-control__button):last-child {
  --ffehbo-button-radius: 0;
  border-right-width: 0;
}
