.block-product-buy-button-group__quantity-selector {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* "Show quantity selector when floating": hide it in the normal embedded
   position and only reveal it once the button is actually floating. Scoped
   to the opt-in attribute so it doesn't change existing behavior anywhere
   this isn't explicitly enabled. */
theme-sticky-position[data-show-quantity-on-float="true"] .block-product-buy-button-group__quantity-selector {
  display: none;
}

theme-sticky-position[data-show-quantity-on-float="true"].is-sticky .block-product-buy-button-group__quantity-selector {
  display: inline-flex;
}

.block-product-buy-button-group__quantity-selector-label {
  flex-shrink: 0;
  color: rgb(var(--color-text));
  font-size: var(--quantity-selector-label-font-size, 18px);
  line-height: 1.2;
}

.block-product-buy-button-group .block-product-buy-button-wrapper {
  flex-grow: 1;
}
.block-product-buy-button-group .payment-button-wrapper {
  width: 100%;
}
.block-product-buy-button-group .payment-button-wrapper.is-disabled {
  display: none;
}

@media (max-width: 959px) {
  .block-product-buy-button-group__quantity-selector-label {
    font-size: var(--quantity-selector-label-font-size-mobile, 18px);
  }

  .is-sticky > .block-product-buy-button-group {
    position: fixed;
    inset-block-end: var(--fixed-bottom, 0);
    inset-inline-start: 0;
    z-index: var(--z-index-sticky);
    width: 100%;
    /* Keep the outer gap minimal (just enough to clear the home-indicator
       safe area) — the extra size goes into the button itself below,
       not into empty space around it. */
    padding-block: 16px calc(40px + env(safe-area-inset-bottom, 0px));
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgba(var(--color-background));
    border-block-start: 1px solid rgba(var(--color-text), 0.05);
    box-shadow: 0 0 40px rgb(0 0 0 / 8%);
    animation: animation-slide-in-bottom 0.3s;
  }

  /* Grow the button itself (not the surrounding gap) while floating, so it
     actually reads as a bigger, easier-to-hit thumb target. */
  .is-sticky > .block-product-buy-button-group .block-product-buy-button {
    padding-block: 20px;
  }
}
/* Talons custom button typography. Kept with the module so pages without a
   product buy-button group do not download it. */
.product-detail__buy-button-group .block-product-buy-button-text,
.block-product-buy-button-text {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .product-detail__buy-button-group .block-product-buy-button-text,
  .block-product-buy-button-text {
    font-size: 18px;
  }
}