/* BACK IN STOCK KLAVIYO
************************/
.buy-buttons .quantity:has(~ .product-form__submit[disabled]:not([loading])) {
  display: none;
}

/* Sold out button is replaced by the back in stock button (placeholder then Klaviyo's) */
.buy-buttons:has(.klaviyo-bis-placeholder, #klaviyo-bis-button-container) .product-form__submit[disabled]:not([loading]) {
  display: none;
}

/* Placeholder shown on sold out variants until Klaviyo injects its button */
.klaviyo-bis-placeholder {
  display: none;

  .product-form__submit[disabled]:not([loading]) ~ & {
    display: block;
  }

  &[aria-busy] button {
    opacity: .6;
    cursor: progress;
  }
}

#klaviyo-bis-button-container,
.klaviyo-bis-placeholder {
  flex: 1 1 100%;
  margin-bottom: 0 !important;

  > div {
    height: 100%;

    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      width: 100%;
      height: 100%;
      font-family: var(--font-button-family);
      font-weight: var(--font-button-weight);
      font-size: var(--text-lg);
      background: #FFFFFF;
      box-shadow: inset 0 0 0 2px #8C8C8C;
      border-radius: 9999px;
      color: #8C8C8C;
      min-height: 3.75rem;
      padding: 15px;
      box-sizing: border-box;
      transition: color .2s, box-shadow .2s;

      &::after {
        content: "";
        flex-shrink: 0;
        width: 1.5rem;
        height: 1.125rem;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='.75' y='.75' width='22.5' height='16.5' rx='2.25'/%3E%3Cpath d='m1.5 1.5 10.5 8.25L22.5 1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      &:hover {
        color: rgb(var(--color-foreground));
        box-shadow: inset 0 0 0 2px rgb(var(--color-foreground));
      }
    }
  }
}